无法正确对齐我的 CSS 菜单答案

【问题标题】：Can't properly align my CSS menu无法正确对齐我的 CSS 菜单
【发布时间】：2012-02-08 14:03:40
【问题描述】：

我目前正在尝试学习 CSS/HTML，如果有一个非常明显的解决方案，我很抱歉。我只是用它来练习我目前学到的东西，但它总是出错。

在搞砸了我的代码几个小时之后，我终于让我的导航栏向右对齐，而不会弄乱其他所有内容。但是它现在不会出现在我的“标题”div 中。我的基本结构是一个标题 div，其中包含一个用于徽标的 div（左对齐）和一个用于导航菜单的 div（右对齐）。

但是，在最终使它们正确对齐后，我似乎无法将菜单 div 放在正确的位置。这是一张说明我的意思的图片：

http://i.stack.imgur.com/ot5ls.png

我暂时将“标题”div 的颜色更改为黑色，以更好地说明我的问题。如您所见，我的菜单在标题 div 的下方，而且还稍微靠右？

这是我的 HTML 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body id="home_p">

<div id="header">

<div id="logo">
</div>

<div id="menu">

<ul id="nav">
<li id="home"><a href="#"></a></li>
<li id="about"><a href="#"></a></li>
<li id="portfolio"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li>
</ul>

</div>
</div>


</body>
</html>

这是我的 CSS：

body
/* T5 */
{background-color:#fff8d3; font-size:100%;}

body#home_p #home{background:url('home.gif') 0 -45px;}
body#about_p #about{background:url('about.gif') 0 -45px;}
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;}
body#contact_p #about{background:url('contact.gif') 0 -45px;}

#header {
background-color:#000000;
height:45px;
width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:90px;
}

#logo {
background-image('logo.gif');
height:45px;
width:181px;
}


#menu {
width:328px;
float:right;
}

#nav
{position:absolute;}

#nav ul{
display: inline;
}


#nav li{
height:45px;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
right:0px;
top:0px;
display:inline;
float:right;
}

#nav a
{height:45px;
display:block;
}


#home{left:0x; width:62px;}
#home{background:url('home.gif') 0 0;}
#home a:hover{background: url('home.gif') 0 -45px;}

#about{left:62px;width:65px;}
#about{background:url('about.gif') 0 0;}
#about a:hover{background: url('about.gif') 0 -45px;}

#portfolio{left:147px;width:98px;}
#portfolio{background:url('portfolio.gif') 0 0;}
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;}

#contact{left:265px;width:83px;}
#contact{background:url('contact.gif') 0 0;}
#contact a:hover{background: url('contact.gif') 0 -45px;}

我非常感谢任何帮助。提前致谢。

【问题讨论】：

标签： css navigation alignment

【解决方案1】：

CSS：

body
{
    background-color: #fff8d3;
    min-width: 600px;
}

body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about
{
    background-position: 0 -45px !important;
}

#header
{
    background-color: black;
    height: 45px;
    width: 90%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 90px;
}

#logo
{
    background-image: url('logo.gif');
    background-color: #fff8d3;
    height: 45px;
    width: 181px;
}

#nav
{
    position: relative;
    float: right;
    padding: 0;
    margin: 0;
}

#nav li
{
    height: 45px;
    margin: 0 -2px;
    padding: 0;
    list-style: none;
    position: relative;
    display: inline-block;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}

#nav li:hover
{   
    background-position: 0 -45px;
}

#nav a
{
    height: 100%;
    width: 100%;
    position: abosolute;
    display: block;
}


#home
{
    width: 62px;
    background-image: url('home.gif');
}

#about
{
    width: 65px;
    background-image: url('about.gif');
}

#portfolio
{
    width: 98px;
    background-image: url('portfolio.gif');
}

#contact
{
    width: 83px;
    background-image: url('contact.gif');
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>T5</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body id="home_p">
        <div id="header">
            <!-- The floating elements have to go before the main content, or they will appear below. -->
            <ul id="nav">
                <li id="home" title="Home"><a href="javascript:void();"></a></li>
                <li id="about" title="About"><a href="javascript:void();"></a></li>
                <li id="portfolio" title="Portfolio"><a href="javascript:void();"></a></li>
                <li id="contact" title="Contact"><a href="javascript:void();"></a></li>
            </ul>
            <div id="logo"></div>
        </div>
    </body>
</html>

【讨论】：

这很完美，但我不是很了解所有的变化！
慢慢看一遍，又看了一遍定位，我想我现在明白了。起初我不明白菜单怎么会出现在 HTML 中的 logo 之前！但现在我对定位有了更多的了解。谢谢！
我也做了很多其他的小改进。你有很多错别字、没有做任何事情的代码、可能被压缩的代码等等。一定要把它和你以前的代码进行比较。

【解决方案2】：

通过在 #nav 上设置 position:absolute 但不给它坐标 (left/top)，它会落在其他地方。给它加个边框，你会看到。但是让我们把它放在一边：

您不需要菜单项的绝对位置。将每个设置为 float:left 并留有边距
在#header上设置position:relative，然后用position:absolute将#nav锚定到右上角
由于每个链接共享相同的悬停状态，因此只需更改背景位置一次声明a:hover
使用易于访问的图像替换方法，将实际文本保留在 HTML 中

这里有一个脚手架供您构建：http://jsfiddle.net/Pz3Q3/

我强烈建议您阅读此内容：http://na.isobar.com/standards/

【讨论】：

我想我太快做太多了！现在已经阅读了更多关于定位的内容，我想我现在更好地理解了。谢谢。
其实是因为他把浮动元素放在了非浮动元素之后。简单地将一个元素设置为绝对定位永远不会改变它的当前位置，只会改变它的尺寸以及它如何影响兄弟姐妹的位置。
@Zenexer "somewhere else" -> 不在预期的地方（在这种情况下，正常流动位置）。

【解决方案3】：

您在#menu 上设置的宽度会在整个 CSS 中造成严重破坏。你的“#nav ul”什么也没做。但最终的问题是你的#logo 需要有一个 float: left;

所有的绝对定位都是不必要的。使用这个：

#logo { 
  background-image('logo.gif'); 
  height:45px; 
  width:181px; 
  float: left;
} 

#menu { 
  float: right;
} 

#nav li{ 
  list-style:none; 
  display: inline;
}

【讨论】：

感谢您的回复。我试过你的建议，但现在我什至看不到菜单？
其实现在可以了，我也是从另一个回复中得知的。谢谢:)