Question

我有一个简单的html页面，其中包含一些基本的CSS。由于某种原因，横幅用他的背景颜色覆盖了ul。

 <ul>
    <li>
        <h1>veediback</h1>
    </li>
    <li>Groups</li>
    <li>Discover</li>
</ul>
<div id="banner"></div>

CSS：

    html, body {
    width:100%;
    height:100%;
}
body {
    line-height: 1;
    margin:auto;
    text-align:center;
}
h1 {
    font-style: italic;
    display: inline;
    color:#3366FF;
}
li {
    padding-left: 20px;
    list-style-type: none;
    display: inline;
}
ol, ul {
    float:left;
    list-style: none;
    display: block;
    margin-left:20vw;
}
#banner {
    height:30%;
    background-color:black;
}

Answer 1

ul仍在那里，你只是看不到它，因为它也是黑色的。您必须更改列表项或背景的颜色。如果你想让横幅出现在列表之后，你应该摆脱＆＃34; float：left;＆＃34; ＆＃34; ol，ul＆＃34;。

Answer 2

归因于float: left;会从网络流中移除所有<li>元素，并使<ul>的高度为0px。

您要做的是通过应用.banner或clear:left;来清除clear: both;

Answer 3

以下是 link

<强> CSS：

li {
    padding-left: 20px;
    list-style-type: none;
    display: inline;
    color:#fff;
}

Answer 4

@chris，UL在您的css中float:left覆盖了横幅div。尝试在横幅中使用clear:both。

background-color填充另一个标签| CSS

4 个答案: