3

我有一个<ul> <li>并且我需要使用display: inline-block;. 这是必要的，以便“浮动” li，而最后一个元素是其父容器的 100% 宽，并且可能有任何数量的 li（浮动意味着 li 的数量是有限的，具体取决于其包含元素的宽度） . 所以总宽度<ul>将大于视口的宽度。

这很好，除了我需要“浮动”元素多行并且我希望所有不是多行的元素都是<ul>.

我可以通过设置 JS 的高度来实现我想要的，<ul>但这是我真的不想做的事情。

这是一个JS小提琴。 http://jsfiddle.net/d5WBv/3/

有没有人有办法解决吗。我不确定 flexbox 是否display: table;可以解决这个问题，但我似乎无法解决......

谢谢！

4

2 回答 2

3

我猜，你的意思是所有的li都应该有相同的高度？

如果是这样，您可以将它们显示为表格单元格：

ul {
    display: table;
    width: 100%;
}

li {
    vertical-align: top;
    display: table-cell;
    padding: 10px;
    margin: 0;
}

另外，检查更新的 fiddle。

于 2013-09-27T10:15:44.357 回答
0

I have a CSS solution for you, check out this Working Fiddle

DownSide: it requires to Double the ul li elements, (one of them is for taking the real space in the document flow, (he don't render as we want but so will be hidden), and one of them is showed, on top of the other, with the display you want.

HTML:

<div class="Container">
    <ul class="Hidden">
        <li>This stays on one line</li>
        <li>And this</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
    </ul>
    <ul class="Visible">
        <li>This stays on one line</li>
        <li>And this</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
    </ul>
</div>

CSS:

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.Container
{
    position: relative;
}

.Hidden
{
    visibility: hidden;
}

.Visible
{
    position: absolute;
    top: 0;
    height: 100%;
}

ul
{
    white-space: nowrap;
    background-color: #cccccc;
    font-size: 0;
}
li
{
    display: inline-block;
    padding: 10px;
    border-right: 1px solid red;
    background-color: #2c2c2c;
    text-align: center;
    color: #fefefe;
    white-space: normal;
    vertical-align: top;
    font-size: 16px;
    height: 100%;
}

li:last-child
{
    width: 100%;
    border-right: 1px solid #2b2b2b;
}
于 2013-09-27T12:26:10.490 回答