无序列表问题

Question

我的无序列表似乎超出了它的父元素并进入了它的下方。我确定这是一个简单的解决方法，但我就是想不通。我是 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>

Answer 1

该段落元素是块级元素，因此它会将您的 ul 向下推。要解决这个问题，你可以 float:left 你的 p 标签在 header

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>

无序列表问题

Unordered list issue

html

css

list

unordered