html - CSS显示表格忽略宽度

Question

我有多个向左浮动的 li 项目，我想在它们周围设置一个右边框，以便它们都获得相同的边框高度。因此，我使用了display:table;但是它忽略了 li 的宽度。如何强制对所有 li 项目使用相同的宽度？

HTML：

<ul>
    <li>a</li>
    <li><img src="http://farm8.staticflickr.com/7437/9982948185_19ae813ee0_n.jpg"/></li>
    <li>b</li>    
</ul>

CSS：

ul{
    display: table;
}

ul li{
    display: table-cell;
    width: 50px !important;
    border-right: 1px solid red;
}

演示：http: //jsfiddle.net/xbmEQ/

score 3 · Accepted Answer

您可以尝试“表格布局：固定”

score 1 · Accepted Answer

您的图像更大，因此您遇到了问题。将最大宽度设置为图像：

ul li img {
    max-width:100%;
}

在 li 上也使用分词，

score 1 · Accepted Answer

您还需要定义 img 标签的宽度，因为 img 标签采用全宽，因此您可以将图像宽度设置为 50px，但更好的方法是定义宽度 100%。

如果您不想在 li 标签内指定任何内容，则可以设置display: inline-block; overflow: hidden;为 yourli而不是使用display: table-cell;toli

score 0 · Accepted Answer

不确定您要达到什么目的，但是这个小提琴呢

ul{}

ul li{
     display: inline-block;
     width: 50px;
     border: 1px solid red;
     overflow:hidden;
}

编辑了 FIDDLE 和 CSS，添加了 height 属性。小提琴 2.0

ul li{
    display: inline-block;
    height:100px;
    width: 50px;
    border: 1px solid red;
    overflow:hidden;
}

score 0 · Accepted Answer

你想让图像宽 50px 吗？在这种情况下，您只需要添加这段代码：

ul li img{
    width: 50px;
}

score 0 · Accepted Answer

您可以设置项目的min-width，li使它们不会缩小到下方50px。

它保留height所有li匹配（和动态）项目的 s 以匹配边框高度。它还保持所有li项目的50px宽度，除非它们的内容超过50px（如您的图像）。

（我没有在 Chrome 以外的任何其他浏览器中测试过这个）

6 回答 6