Question

我正在尝试学习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;}

我真的很感激任何帮助。提前谢谢。

Answer 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>

Answer 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/

Answer 3

您在#menu上设置的宽度会对整个CSS造成严重破坏。你的“#nav ul”没有做任何事情。但最终问题是你的#logo需要浮点数：left;

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

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

#menu { 
  float: right;
} 

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

无法正确对齐我的CSS菜单

3 个答案: