Question

我问的是这个问题，因为我目前正在努力理解<ul>和<li>之间的区别。到目前为止，我已阅读，练习和理解，<ul>（无序列表）似乎就像父<div>一样，我们可以放置<li>项。

如果是这样的话，那么如果定义<ul>的颜色，那么它的所有子<li>也应该具有相同的颜色。

但不幸的是，它并没有这样做。请亲自看看。只有当我定义<li>的背景颜色时，颜色才会最终变化然而，令人惊讶的是，我能够在<ul>中定义文本颜色（红色）但我不确定为什么背景颜色（黑色）不是通过<ul>定义来的？

我知道，另一种选择很简单：只需在<li>元素中定义背景颜色为黑色即可。但是，我想了解这背后的原因，这有助于我更好地理解<ul>和<li>的定义。

＆＃13;

ul {
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 0, 0, 1);
}
ul li {
  display: inline-block;
  float: left;
  border: 1px solid #000;
  list-style-type: none;
}

＆＃13;

<body>
  <ul>
    <li>First</li>
  </ul>
</body>

＆＃13;

Answer 1

由于ul标记clear fix导致li导致float高度未正确处理，因此您可以使用明确的修复方法解决此问题。

.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 {
  background-color: rgba(0,0,0,1);
  color: rgba(255,0,0,1);
}

ul li {
  display: inline-block;
  float: left;
  border: 1px solid #000;
  list-style-type: none;
}

只需将.cf类添加到UL代码

即可

<ul class="cf">
  <li> First </li>
</ul>

CHECK JS BIN

Answer 2

在ul..it上放置clearfix类可以正常工作..：）

.clearfix {
        zoom: 1;
    }
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
        line-height: 0;
    }
    .clearfix:after {
        clear: both;
    }

Answer 3

您在列表项上使用float并且您尚未在父级上设置布局。阅读hasLayout css。将inline-block与flaot一起使用是多余的。只使用一个。 overflow隐藏设置父级的布局。使用float时，请始终设置父级的布局。

＆＃13;

ul {
  background-color: rgba(0,0,0,1);
  color: rgba(255,0,0,1);
  overflow: hidden;
}

ul li {
  float: left;
  border: 1px solid #000;
  list-style-type: none;
}

＆＃13;

<body>
  <ul>
    <li> First </li>
  </ul>
</body>

＆＃13;

Answer 4

因为你使用浮动，这就是原因。

使用隐藏在UI中的溢出就像：

 overflow: hidden;

这是小提琴

https://jsfiddle.net/zt3auduv/1/

更改CSS中<ul>的颜色

4 个答案: