Question

我很难在Safari中平均分配<ul>，因此内联<li>元素占宽度的100％。

html代码基本上是：

<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
    <li>orange</li>
    <li>purple</li>
</ul>

用css：

ul {
   list-style: none;
   margin: 0;
   padding: 0;
   width: 500px;
   background-color: #9999ff;
}
li {
   text-align: center;
   text-decoration: none;
   display: inline-block;
   border-left: 1px solid #000;
   width: 20%;
   box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
li:last-child {
   border-right: 1px solid #000;
}

这似乎会使5个均匀空间列表元素占据每个总宽度的20％（包括边框）。在Firefox和Chrome中完美运行，但Safari在最后留下了大约6个像素左右。当我删除box-sizing属性时，列表变得太长。我似乎无法让这件简单的事情适合我的生活。

这是JSFiddle：http://jsfiddle.net/z2Xdf/7/

Answer 1

我在Chrome中为我呈现了错误的方式......至少使用jsFiddle。

内联块在侧面放置一些空白区域。从li显示中删除：内联块并添加

display:block;
float:left;

另外，将背景颜色从ul。

移到li

如果你想继续显示：inline-block，你显然可以这样做......

<ul><!-
    -><li>stuff</li><!-
    -><li>stuff</li><!-
-></ul>

但这似乎很难打字？

此处更多"hacks" （查看评论）...

Box大小不规则在Safari中

1 个答案: