Question

我确信以前曾经问过这个问题，但我无法找到适合我情况的解决方案。

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

标题宽960px，高120px。其中（现在）是一个img和一个4 li的ul。我正试图定位img和ul我希望它们出现的方式。我漂浮了img left并给它分配了23px的上边距以垂直对齐它我想要的---所以它的位置很好。当我尝试定位ul时会出现问题。根据我应用的浮动，清除，边距或填充设置，它将垂直显示在img的下方或上方（就像图像向上或向下推动ul一样）。下图显示了我在下面粘贴的CSS时发生的情况：

Image of problem

这是标题的相关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”中的顶部像素）水平延伸出来，这就是无序列表所在的位置。如果我更改浮动设置，我可以使图像的底部（字面意思是“j”中的底部像素）成为无序列表的上限。我也不希望列表在哪里。如何解放列表以便我能正确定位？

Answer 1

以下是我修改你的CSS之前的样子 enter image description here

只是像这样漂浮#header div

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

当我使用你的代码时，向右移动了nav li 之后：这是浮动标题div 时的样子 enter image description here

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

Answer 2

如果您相对定位#header，则绝对可以将<ul>和<img />放在标题中：

#header {
   height: 120px;
   position: relative;
}

#header img {
   margin-top: 23px;
   position: absolute;
   top: 23px;
   left: 0;
}

#header ul {
   list-style-type: none;
   font-size: 1.3em;
   position: absolute;
   top: 0;
   right: 0;
}

要使您能够正常工作，只需更改顶部和底部的值，具体取决于您希望图片和无序列表在标题中显示的位置。

这种Absolute Positioning Inside Relative Positioning技术在CSS-Tricks中有更详细的描述（见下面的截图）。

具有相对定位的页面元素使您可以将子元素绝对定位在其中。

enter image description here

CSS：麻烦控制标题布局（ul，img）

2 个答案: