Question

我希望我的<li>元素在每个<ul>块中水平对齐，但每个<ul>块在新行的左侧开始。以下方法无效。 <ul>显示在同一行。

＆＃13;

<style>
  .fl {
    float: left;
  }
</style>

<ul>
  <li class='fl'>Test 1</li>
  <li class='fl'>Test 2</li>
</ul>
<ul>
  <li class='fl'>Test 3</li>
  <li class='fl'>Test 4</li>
</ul>

＆＃13;

https://jsfiddle.net/bcLudxwj/

我该如何解决？

Answer 1

方法-1：使用 m

在display: flex;标记中添加ul Css display: flex;并删除内联样式。下面示例请参阅

<ul style='display:block'>

现场演示 Here

以下代码段示例

＆＃13;

ul
{
  display: flex;
}
li.fl
{
  float:left;
  margin-right:10px;
  list-style-type: none;

}

＆＃13;

ul
{
  display: flex;
}
li.fl
{
  float:left;
  margin-right:10px;
  list-style-type: none; 
}

＆＃13;

方法-2：使用 <ul> <li class='fl'>Test 1</li> <li class='fl'>Test 2</li> </ul> <ul > <li class='fl'>Test 3</li> <li class='fl'>Test 4</li> </ul>

在display: table;标记中添加ul Css display: flex;并删除内联样式。下面示例请参阅

<ul style='display:block'>

现场演示 Here

以下代码段示例

＆＃13;

ul
{
  display: table;
}
li.fl
{
  float:left;
  margin-right:10px;
  list-style-type: none;

}

＆＃13;

ul
{
  display: table;
}
li.fl
{
  float:left;
  margin-right:10px;
  list-style-type: none; 
}

＆＃13;

Answer 2

具有float属性的元素的容器需要＆＃34; cap＆＃34;要正确使用。这个上限通常被称为＆＃34;更清晰＆＃34;。你需要创建一个班级＆＃34;更清晰的＆＃34;像这样在css中：

<style>
.clearer {
     clear:both;
  }
</style>

并在每个<div class="clearer"></div>

之前加上</ul>

Answer 3

试用此代码：

.fl{ float:left;clear:both;}

Answer 4

由于您没有清除每个ul块的浮点数，因此ul不会以新行开头。

同时添加margin以说明无序列表的项目符号的空间 - 请参阅下面的演示：

更新小提琴：https://jsfiddle.net/xu9j3rsp/

.fl {
  float: left;
  margin: 15px;
}
ul:after {
  content: '';
  display: block;
  clear: both;
}

<ul>
  <li class='fl'>Test 1</li>
  <li class='fl'>Test 2</li>
</ul>
<ul>
  <li class='fl'>Test 3</li>
  <li class='fl'>Test 4</li>
</ul>

Answer 5

显示列表项的内联块和ul

的显示块

ul li{
  display:inline-block;
}

ul{
 display:block;
 }

Answer 6

您需要清除ul：

ul {
  overflow: hidden;
}

当<li>浮动时，为什么每个<ul>都不从左边开始？

6 个答案: