Question

我是Web开发的新手，我试图创建一个简单的HTML网站，使用较小的CSS样式和一些PHP，我目前面临使用CSS后使用CSS的问题：在div上留下

＆＃13;

.mid-bar {
  background-color: red;
}

.mid-bar li {
  float: left;
  list-style-type: none;
  margin-right: 5px;
  padding: 5px 2px;
}

＆＃13;

<div class="mid-bar">
  <ul>
    <li>Hello There !</li>
  </ul>
</div>

＆＃13;

这一个向左浮动，但背景不会改变

任何帮助将不胜感激

谢谢！

Answer 1

将子元素作为浮动元素的父元素将会失去高度，请使用clearfix类，以了解更多内容here

＆＃13;

.mid-bar
{
    background-color: red;
}

.mid-bar li
{
    float: left;
    list-style-type: none;
    margin-right: 5px;
    padding: 5px 2px;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

＆＃13;

<!doctype>
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    <div class="mid-bar clearfix">
        <ul>
            <li>Hello There !</li>
        </ul>
    </div>
</body>
</html>

＆＃13;

使用float时CSS不起作用

1 个答案: