我的无序列表似乎已经脱离了它的父元素并且在它之下。我确定这是一个简单的解决办法,但我无法弄明白。我是html和css的新手。
我已经在这里添加了我的代码,希望有人为我找出一些东西。我想我之前已经问过这个问题了。反正我还不确定。提前谢谢。
header {
width: 100%;
height: 36px;
border-bottom: 1px solid #f0efef;
box-shadow: 0 0 5px 0 #f0efef;
}
.header-content {
width: 1030px;
height: 36px;
background-color: red;
}
.header-content p {
margin: 0;
font-size: 14px;
padding: 7px 15px 0 15px;
}
.header-content ul {
margin: 0;
float: right;
list-style: none;
padding: 5px 15px 0 15px;
}
.header-content ul li {
padding-left: 10px;
display: inline;
}
.header-content ul li a, a:visited {
color: #404040;
font-size: 14px;
text-decoration: none;
}

<header>
<div class="header-content">
<p>Welcome, please sign or register</p>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Gift Cards</a></li>
<li><a href="#">Customer Care</a></li>
<li><a href="#">Community</a></li>
</ul>
</div>
</header>
&#13;
答案 0 :(得分:1)
该段落元素是一个块级元素,所以它会推动你的ul。要解决此问题,您可以浮动:将标记保留在标题
中
header {
width: 100%;
height: 36px;
border-bottom: 1px solid #f0efef;
box-shadow: 0 0 5px 0 #f0efef;
}
.header-content {
width: 1030px;
height: 36px;
background-color: red;
}
.header-content p {
margin: 0;
font-size: 14px;
padding: 7px 15px 0 15px;
float:left;
}
.header-content ul {
margin: 0;
float: right;
list-style: none;
padding: 5px 15px 0 15px;
}
.header-content ul li {
padding-left: 10px;
display: inline;
}
.header-content ul li a, a:visited {
color: #404040;
font-size: 14px;
text-decoration: none;
}
<header>
<div class="header-content">
<p>Welcome, please sign or register</p>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Gift Cards</a></li>
<li><a href="#">Customer Care</a></li>
<li><a href="#">Community</a></li>
</ul>
</div>
</header>