Question

所以我在这个列表中有浮动列表项，宽度等于50％。它们都是动态生成的，有些李的高度比摔跤更高，而它旁边的那个伸展到那个高度，有点看起来很怪异。而且我不希望它延伸。这是我的代码：

HTML

<ul>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
        <ul>
            <li><strong>More options</strong></li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3 </li>
        </ul>
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
</ul>

CSS

ul > li {
    float: left;
    width: 50%;
}

ul > li li {
    width: 100%;
    float: none;
}

JSFiddle - ＆gt; https://jsfiddle.net/y160n4hg/

Answer 1

请尝试以下操作： Demo

CSS：

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    /*  -moz-column-fill: auto;*/
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}
ul.one {
    list-style: none;
    margin:0;
    padding:0;
}
ul.one >li {  
    background:green;
    display:inline-block;
    width:100%;
    vertical-align:top;
}
ul.one li li {
    width: 100%;
    float: none;
    background:yellow;
}

ul.one li > ul >li {
    color: red;
    width: 100%;
    float: none;
}

HTML：

<div id="container"> <ul class="one">..</ul></div>

Answer 2

您可以将max-height设置为LI元素并设置overflow auto以获取滚动条以滚动值。

＆＃13;

ul > li {
    float: left;
    width: 50%;
    max-height: 70px;
    overflow: auto;
}

ul > li li {
    width: 100%;
    float: none;
}

＆＃13;

<ul>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
        <ul>
            <li><strong>More options</strong></li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3 </li>
        </ul>
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
</ul>

＆＃13;

https://jsfiddle.net/y160n4hg/3/

Answer 3

查看此修改后的版本：https://jsfiddle.net/scarl3tt/y160n4hg/1/

我已添加此代码以证明列表项目实际上并未拉伸 - 它们只是向下浮动。

ul > li {
    ...
    background: red;
}

Float并不会自动将事情推向最高点。有javascript库可以为你压缩内容，尽管它们非常糟糕。 Masonry是最受欢迎的广告之一。

Answer 4

试试这个

<强> HTML

<ul>
    <li><span>Some Label 1-1</span> Some text</li>
    <li><span>Some Label 1-2</span> Some text</li>
</ul>

<ul>
    <li> <span>Some Label 2-1</span> Some text
        <br> <strong>More Options</strong>

        <ul>
            <li>Some More Text</li>
        </ul>
    </li>
    <li><span>Some Label 2-2</span> Some text</li>
</ul>

<强> CSS

ul {    
    float:left;
}
li ul {
    float:none;
}

Fiddle Demo

不要根据旁边的元素拉伸元素的高度

4 个答案: