我有一个这样的左侧菜单:
<table table-layout="fixed" width="800px">
<tr valign="top">
<td width="140px" overflow="hidden">
<div class="link-list">
<ul class="tablist">
<li> <a href="/url1/">Short</a> </li>
<li> <a href="/url2/">MediumItem</a> </li>
<li> <a href="/url3/">ThisIsALongWidthItem</a></li>
</ul>
</div>
</td>
<td>
the page main content here
</td>
</tr>
</table>
CSS就像这样:
.tablist
{
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
white-space:nowrap;
}
.tablist li
{
float:left;
margin-right:0.13em;
}
.tablist li a
{
display:block;
padding:0.5em 3em; /*I'm trying to set this value*/
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
}
我想制作物品来填充左栏的整个宽度。当将填充设置为较小值时,它们会在右侧留出空间,因为项目具有不同的宽度。所以我试图将它设置为大值(跳跃它可以填充空白区域)但是它们超出了列边距并且与右侧col的内容混合在一起。 如何将其分隔为列宽?
答案 0 :(得分:0)
使用常规框模型很难考虑填充和边框,因为它们被添加到声明的宽度,因此您必须参与计算以从宽度中减去它们。 最好的选择是回到原始IE框模型,其中包括填充和宽度边框(所以当你声明宽度100%时,你知道它总是100%,包括边框和填充)。 为此,请使用以下css规则集:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
答案 1 :(得分:0)
您可以在li上放置最大宽度,以确保它不会超出它的父容器。
max-width: 100%;
我不确定这是不是你的意思。最好是设置一个JSFiddle来模仿这个问题。
看起来你可能正在解决使用li和a之间的问题。