当 <li> 浮动时，为什么每个 <UL> 不是从左侧开始？答案

【问题标题】：Why doesn't each <UL> start from the left when <li> is floating?当 <li> 浮动时，为什么每个 <UL> 不是从左侧开始？
【发布时间】：2023-03-14 09:52:01
【问题描述】：

我希望我的 <li> 元素在每个 <ul> 块中水平对齐，但每个 <ul> 块从左侧开始新行。以下将不起作用。 <ul>s 显示在同一行。

<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>

https://jsfiddle.net/bcLudxwj/

我该如何解决？

【问题讨论】：

标签： html css alignment css-float

【解决方案1】：

方法一：使用 display: flex;

添加 ul Css display: flex; 并删除 <ul style='display:block'> 标签中的内联样式。下面的示例见

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

}

现场演示 Here

以下片段示例

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

<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'> 标签中的内联样式。下面的示例见

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

}

现场演示 Here

以下片段示例

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

<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>

【讨论】：

【解决方案2】：

uls 不会从新行开始，因为您尚未清除每个 ul 块的浮动。

也添加一个margin 来说明无序列表的 bullets 的空间 - 请参阅下面的演示：

更新小提琴：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>

【讨论】：

感谢所有有用的答案。在UL 元素上设置clear:both 解决了这个问题。

【解决方案3】：

具有浮动属性的元素的容器需要一个“cap”才能正确使用。这个上限通常被称为“更清晰”。您需要在 css 中创建一个像这样“更清晰”的类：

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

把这个<div class="clearer"></div>放在每个</ul>之前

【讨论】：

【解决方案4】：

试试这个代码：

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

【讨论】：

【解决方案5】：

为列表项显示行内块，为 ul 显示块

ul li{
  display:inline-block;
}

ul{
 display:block;
 }

【讨论】：

【解决方案6】：

你需要清除 ul:

ul {
  overflow: hidden;
}

【讨论】：