解决方案

Question

＆＃13;

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}
.navigation li {
  list-style-type: none;
  float: left;
  padding: 1em;
}

＆＃13;

<ul class="navigation">
  <li> <a href="#help"> Help </a> 
  </li>
  <li> <a href="#about"> About us </a> 
  </li>
</ul>

<p>lorem ipsum</p>

<br/>

<p id="help"><b> Help yourself man </b>
</p>
<p id="about"><b> We're free software lovers </b>
</p>

＆＃13;

如果我们检查，则用户代理样式表下的上述代码段（使用dev tool）ul和p元素均为display:block 。 element.style中未应用任何内容，且没有float:left

是的，float已应用于li 而不是ul ，从float:left课程中删除.navigation li将解决问题

p和ul都是阻止元素，那么他们为什么会表现为内嵌元素？没有添加新的换行符。

我没有寻找解决方案，我需要了解这背后的概念。

Answer 1

解决方案

将clear: left添加到p标记。这将导致它落在它前面的左浮动元素之下。

在ul标记上使用Nicolas Gallagher's micro clearfix：

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  *zoom: 1;
}

这会使ul标记扩展到其中包含的li元素的大小。

解释

浮动元素不会占用文档流中的空间，因此在这种情况下，它们被包裹的元素ul不会增长占用空间，所以它是0 px high。

p标记位于ul之后，不占用空间，因此它显示在顶部。

li标签浮动到左侧，这意味着它们向左滑动并将所有内容推到右侧，可以将其推到左侧。在这种情况下，p代码。

Answer 2

烨

从Float:left类

中删除.navigation li

嗨，学生，

li表现不像内联元素，它本身就是Block元素。如果Float:left的Block元素始终背靠背对齐。

http://www.impressivewebs.com/difference-block-inline-css/

从中可以清楚地了解到什么是内联和块元素

Answer 3

问题是ul内的所有元素都是浮动的，因此ul的行为就像它没有内容一样。

如果您希望li保留在一行，一种解决方案是使用display: inline代替float: left。

＆＃13;

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}

.navigation li {
  list-style-type: none;
  display: inline;
  padding: 1em;
}

＆＃13;

<ul class="navigation">
  <li> <a href="#help"> Help </a>
  </li>
  <li> <a href="#about"> About us </a>
  </li>
</ul>
<p>lorem ipsum</p>
<br/>
<p id="help"><b> Help yourself man </b></p>
<p id="about"><b> We're free software lovers </b></p>

＆＃13;

Answer 4

您还可以在Floated li之后添加一个clear：left样式来解决问题。

为什么块元素的行为类似于内联元素？

4 个答案:

解决方案

解释