Question

nav > ul > li {
  float: left;
}
#one {
  float: left;
}

<nav>
  <ul>
    <li>
      he has a cow
    </li>
    <li >
      he has a dog
    </li>
    <li>
      he has a mouse
    </li>
  </ul>
</nav>

<div id="main">
  <div id="one">
    <br/>he has a one</div>
  <div id="two">he has a two</div>
  <div id="three">he has a three</div>
</div>

现在我的问题是为什么所有列出的三个项目都浮动，但我只是想要浮动第一个列出的项目。为什么div元素的行为与列出的项目不同。

Answer 1

现在我的问题是为什么所有列出的三个项float虽然我只是想要要浮动的第一个列出的项目。为什么div元素没有表现喜欢列出的项目。

有一个difference between class . and ID #.

因此，您使用以下内容浮动所有列表项

nav > ul > li {
  float: left;
}

如果您只想应用第一个项目，则应用第一个课程.one。

请参阅以下代码段：

段

＆＃13;

.one {
  float: left;
}
li {
/*demo*/
  width: 100px;
  
}

＆＃13;

<nav>
  <ul>
    <li class="one">
      he has a cow
    </li>
    <li class="one">
      he has a dog
    </li>
    <li>
      he has a mouse
    </li>
  </ul>
</nav>

<div id="main">
  <div id="one">
    <br/>he has a one</div>
  <div id="two">he has a two</div>
  <div id="three">he has a three</div>
</div>

＆＃13;

Answer 2

你可以用：

nav ul li:first-child {
 float:left;
}

nav >ul >li您选择的所有li是ul元素的直接子元素

Answer 3

Alessio的，

“＆gt;”选择器适用于DOM层次结构中所选项目正下方的所有项目。在这种情况下，nav > ul > li适用于导航＆gt;的直接子节点的所有列表元素。 UL认证。仅适用于系列的第一个元素的选择器将是

nav > ul > li:nth-child(1) {
  float: left
}

float for list元素vs其他元素

3 个答案:

段