html - div 部分合二为一？

Question

我在谷歌上搜索了很多问题并试图解决它，但我不能。

我的问题很容易说。代码是：

<html>
<head>
<style type="text/css">
.box_list li
{
    float: left;
    display: block;
    width: 49%;
}
</style>
</head>
<body>
<div>
    <ul class="box_list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<div>USA</div>
</body>
</html>

我想要这个输出：

1    2
3
USA

但不幸的是我的代码的输出是：

1   2
3   USA

请帮我。谢谢

score 0 · Accepted Answer

我会有两个不同的列表。这就是我将如何做到的。

    <ul id="list1"><li>1</li><li>3</li><li>USA</li></ul><ul id="list2"><li>2</li></ul>

现在为 CSS。

    #list1{ float:left; list-style-type:none; } #list2{ float:left; list-style-type:none; }

score 0 · Accepted Answer

尝试这个

CSS 添加：

.clear{
  clear:both;
  display:block;
}

html添加：

<li>2</li><br/>

和

<div class="clear">USA</div>

score 0 · Accepted Answer

你可以使用这种CSS

    .box_list li
    {
        float: left;
        display: block;
        width: 49%;
        background-color:#eee;
    }
    .box_list li:nth-child(odd){
        clear:both;
    }

html - div 部分合二为一？

3 回答 3

Related

Reference