0

我有一个这样的左侧菜单：

    <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 的内容混合。如何将其分隔为列宽？

4

2 回答 2

0

使用常规盒子模型很难考虑填充和边框，因为它们被添加到声明的宽度中，因此您必须进行计算以从宽度中减去它们。最好的选择是回到原来的 IE 盒子模型，它在宽度中包括填充和边框（所以当你声明宽度 100% 时，你知道它总是 100%，包括边框和填充）。为此，请使用以下 CSS 规则集：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; 
}
于 2013-01-25T16:18:28.593 回答
0

您可以在 li 上放置一个最大宽度，以确保它不会进一步成为父容器。

max-width: 100%;

我不确定这是否是你的意思。如果您可以设置一个 JSFiddle 来模拟该问题，那将是最好的。

看起来您可能在同时使用 li 和 a 作为宽度时遇到了问题。

于 2013-01-25T16:21:29.157 回答