类似于 Stack Overflow 顶部导航菜单的 CSS

Question

类似于 Stack Overflow 顶部导航菜单的 CSS

htmlcssnavigation

4

我正在尝试创建一个类似于Stack Overflow（问题、标签、用户、徽章、未回答、提问）的导航菜单。

我尝试通过添加一个logo和5个菜单选项来实现。它们被放置在容器的顶部，但是无法对齐。

我应该如何创建它以使它们对齐？

HTML：

  <body>
  <div id="logoimg">
   <a href="http://www.domain.com">
   <img src="http://www.domain.com/domain.png" border="0"></img>
   </a>
  </div>
  <div id="navi">
 <a href="http://www.domain.com/home.php">Home</a>
 <a href="http://www.domain.com/profile.php">Profile</a>
 <a href="http://www.domain.com/settings.php">Settings</a>
 <a href="http://www.domain.com/logout.php">Logout</a>
 </div>
  <div id="my">
  <div id="box">
 <div id="pic">
 <div id="myname">
  <?php echo "$angelinajolie";?>
  </div>
  </div>
   </div>

</body>

CSS：

  div#logimg {
  margin-left: 213px;
  }

  #box {
 background-color: #FFFFFF;
 margin:0 auto; 
 height: 300px;
 width:830px;
 border:1px solid #E2E2E2;
  }

- AAA

1

你能发布一下你目前的代码吗？ - scunliffe

5

我建议您查看StackOverflow导航菜单的源代码，并将其与您自己的进行比较。 - Will

8

为什么这个问题会有3个踩？虽然它不是SO上最详细的问题，但也不能这样吧。 - Pekka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- borkweb · Accepted Answer

试一试这个：

HTML:

给定以下一个样例：

<div id="header">
    <h1><a href="http://www.domain.com">Name of Site</a></h1>
    <ul class="nav">
        <li><a href="http://www.domain.com/home.php">Home</a></li>
        <li><a href="http://www.domain.com/profile.php">Profile</a></li>
        <li><a href="http://www.domain.com/settings.php">Settings</a></li>
        <li><a href="http://www.domain.com/logout.php">Logout</a></li>
    </ul>
    <ul class="nav extra">
        <li><a href="http://www.domain.com/logout.php">Ask a Question</a></li>
    </ul>
</div>

将整个内容放入一个容器div中。网站的标志应该是一个h1标题，其中包含网站的名称（为了方便屏幕阅读器等使用）。链接列表应该是无序列表。这种结构可以很好地保持内容的完整性，CSS可以完成其余工作。

CSS：

#header h1{
    float: left;
    width: 100px;
    height: 50px;
}

浮动网站标题/徽标并设置宽度和高度。

#header h1 a{
    background-image: url(http://www.domain.com/domain.png);
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    width: 100px;
    height: 50px;
}

在锚点标签上将您的徽标作为背景图像，使锚点标签成为块级元素，并使用文本缩进属性结合隐藏溢出（这将把文本推到左侧）来隐藏文本。请保留HTML标记。

#header a{ text-decoration: none; }

#header .nav li{
    background: #eee;
    border:1px solid #E2E2E2;
    float:left;
    margin-right: 0.5em;
    padding: 0.2em 0.5em;
}

#header .extra{
    float: right;
    margin-right: 0;
    top: 0;
    right: 0;
}

http://jsfiddle.net/6F5ky/