CSS:无法控制页眉布局(ul、img)

Question

我确定之前有人问过这个问题，但我找不到适合我的情况的有效解决方案。

我正在尝试为我的索引页创建标题/导航部分。

页眉宽 960 像素，高 120 像素。其中(现在)是一个 img 和一个带有 4 li 的 ul。我正在尝试定位 img 和 ul 我希望它们出现的方式。我将 img 向左浮动，并为其分配了 23px 的上边距，以按照我的需要垂直对齐它——所以它的位置很好。当我尝试定位 ul 时，问题就出现了。根据我应用的 float 、清除、边距或填充设置，它将垂直显示在 img 下方或上方(就好像图像将 ul 向上或向下推)。下图显示了我在下面粘贴的 CSS 发生的情况:

Image of problem

这是 header 的相关 HTML 代码(非常简单):

<div id="header">
     <img src="_images/header-name2.png" />
     <ul id="navigation">
        <li class="current"><a href="">games</a></li>
        <li><a href="">news</a></li>
        <li><a href="">about</a></li>
        <li><a href="">contact</a></li>            
     </ul>              
</div>

这是生成上图的当前 CSS:

body {
   margin-top: 0px;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   background-image: url(../_images/index-body-bkgd.jpg);
   background-repeat: repeat-x;
   background-color: #333;
}

#wrapper {
   width: 960px;
   margin-top: 0em;
   height: 1050px;
   margin-right: auto;
   margin-left: auto;
}
#header {
   height: 120px;
}
#header img {
   margin-top: 23px;
   float: left;
}
#header ul {
   list-style-type: none;
   padding-left: 430px;
   font-size: 1.3em;
}
#header ul li {
   display: inline;
}
#header ul li a {
   color: #000;
   text-decoration: none;
   padding-top: 10px;
   padding-right: 30px;
   padding-bottom: 10px;
   padding-left: 20px;
}

因此，如果您水平扩展图像的顶部(“d”和“k”中的顶部像素)，这就是无序列表所在的位置。如果我更改 float 设置，我可以使图像的底部(实际上是“j”中的底部像素)成为无序列表的上限。也不是我想要列表的地方。我怎样才能释放列表以便我可以正确定位它？

Answer 1

这是我修改你的 css 之前的样子

像这样 float #header div

  #header {
   height: 120px;
   float: left;
}

当我使用您的代码时，将导航栏向下移动。
之后:这是 float 标题 div 时的样子

有时不 float 父容器会导致 float 的子容器出现奇怪的行为。