Question

<ul class="cls">
    <li><a href="#flw">Flowering tree</a></li>
    <li><a href="#frt">Fruits bearing</a></li>
    <li><a href="#rst">Roadside tree</a></li>
    <li><a href="#med">Medicinal</a></li>
</ul>
<p>paragraph</p>

这是我的代码，用于向文档添加导航按钮。 “ cls”类的css文档的内容为：

p{
    text-align:justify;
    position:relative;
}

.img{
    float:right;
    padding:0 0 20px 30px;
}

ul.cls{
    list-style-type:none;
}

ul.cls li{
    float:left;
}

ul.cls li a{
    display:block;
    padding:16px;
    background-color:#1F618D;
    color:#B2BABB;
    text-decoration:none;
}

p {
  text-align: justify;
  position: relative;
}

.img {
  float: right;
  padding: 0 0 20px 30px;
}

ul.cls {
  list-style-type: none;
}

ul.cls li {
  float: left;
}

ul.cls li a {
  display: block;
  padding: 16px;
  background-color: #1F618D;
  color: #B2BABB;
  text-decoration: none;
}

<ul class="cls">
  <li><a href="#flw">Flowering tree</a></li>
  <li><a href="#frt">Fruits bearing</a></li>
  <li><a href="#rst">Roadside tree</a></li>
  <li><a href="#med">Medicinal</a></li>
</ul>
<p>paragraph</p>

为什么“ ul”之后的“ p”元素不以新行开头？该段的内容与导航在同一行中继续。

Answer 1

我为您提供了一个示例：

apple, banana
banana, carrot
banana, durian

p {
  text-align: justify;
  position: relative;
  background: red;
}

ul.cls {
  list-style-type: none;
  display: flex; /*Make it a flex container*/
  flex-direction: row; /*all flex items on row*/
}

ul.cls li {
  /*removed float:left;*/
}

ul.cls li a {
  padding: 16px;
  background-color: #1F618D;
  color: #B2BABB;
  text-decoration: none;
}

浮动经常破坏元素的自然流动。建议您使用flexbox here。这是一个很好的选择，也很容易理解和使用。

问候。

编辑：哦，这里有个CodePen可以玩。：）

Answer 2

您面临的具体问题是，当您使用float元素时，尽管与绝对定位相比它们仍被认为是文档的一部分，但是它们从document flow中被删除了。

我不会确切地说明为什么会发生这种情况，但是解决此问题的一种方法是使用clearfix类型的CSS类。此类使用提供该类的元素之后的:after（browser compatability）伪选择器添加了一个不可见元素。

透明修补程序在this answer中有更详细的说明，其中是从以下类那里借来的。

p {
  text-align: justify;
  position: relative;
}

.img {
  float: right;
  padding: 0 0 20px 30px;
}

ul.cls {
  list-style-type: none;
}

ul.cls li {
  float: left;
}

ul.cls li a {
  display: block;
  padding: 16px;
  background-color: #1F618D;
  color: #B2BABB;
  text-decoration: none;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<ul class="cls clearfix">
  <li><a href="#flw">Flowering tree</a></li>
  <li><a href="#frt">Fruits bearing</a></li>
  <li><a href="#rst">Roadside tree</a></li>
  <li><a href="#med">Medicinal</a></li>
</ul>
<p>paragraph</p>

当然，您可以始终使用Flex Box，如D.Schaller对此问题的回答中所述，但是请记住，flexbox并不总是supported in older browsers，所以如果您使用Flexbox，请确保还要说明您正式支持的浏览器版本。

为什么“ ul”之后的“ p”元素不以新行开头？该段的内容与导航相同（使用ul创建）

2 个答案: