为什么在<li>浮动时每个<UL>都不从左边开始？

Question

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

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

我该如何解决？

Answer 1

显示列表项的内嵌块和显示 ul 的块

ul li{
  display:inline-block;
}

ul{
 display:block;
 }

Answer 2

您需要清除 ul:

ul {
  overflow: hidden;
}

Answer 3

浮动属性元素的容器需要"cap"才能正确使用。这个上限通常被称为"clearer"。您需要在 css:

中创建一个像这样的 class "clearer"

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

并将这个 <div class="clearer"></div> 放在每个 </ul>

之前

Answer 4

试试这个代码：

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

Answer 5

ul 不会在新行开始，因为您还没有清除每个 ul 块的浮动。

还要添加一个 margin 来说明 space 用于未排序列表的 项目符号 - 请参见下面的演示：

更新 fiddle: 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 6

方法一：使用 display: flex;

添加 ul Css display: flex; 并删除 <ul style='display:block'> 中的内联样式 tag.Below 示例参见

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'> 中的内联样式 tag.Below 示例参见

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>

为什么在<li>浮动时每个<UL>都不从左边开始？

Why doesn't each <UL> start from the left when <li> is floating?

html

css

alignment

css-float