Question

我想制作每个尺寸为200 x 200像素的水平方框。我决定使用ul li。你们知道我必须将float:left属性应用于li标签才能使其成为水平。

我的问题是，当我将float:left应用于li元素时，li中的所有内容都会完全破坏其容器。我注意到了这一点，因为我将边框样式附加到主容器，所有内容都在主容器下面的新行中。

这是我的代码

HTML：

<div class="content-box">
   <h3 class="box-header">Recent Files</h3>
   <ul class="horizontal-content">
       <li>
          <div class="filebox">
          </div>
       </li>
   </ul>
</div>

和css：

.content-box {
   position:relative;
   width:800px;
   border:1px solid #dadada;
   margin-left:10px;
   padding:10px;
}

ul.horizontal-content {
    list-style:none outside none;
}

ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}

.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}

现在你看到了我的所有代码，请帮我弄清楚我做错了什么。

Answer 1

你真的不需要float:left使它成为横向。只需添加display:inline-block并移除float

即可

ul.horizontal-content > li {
  padding:10px;
  background:grey;
  display:inline-block
}

<强> DEMO

Answer 2

添加：

ul.horizontal-content {
    overflow: auto;
}

Answer 3

此处使用overflow:auto，此处为demo Click Here

的链接

Answer 4

我一直在尝试许多解决方案，但他们无法解决。我会为你们创建JSfiddle，看看出了什么问题

Answer 5

好的，所有问题都明确解决了：

li元素不能正确包装在其容器中

5 个答案: