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

2023年12月13日 193次阅读

我正在尝试创建类似于Stack Overflow(问题,标签,用户,徽章,未答复,提问)的导航菜单.

我试着通过一个徽标,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;
  }

最佳答案 试一试：

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;
}

将您的徽标作为背景图像放置在锚标记上,使锚标记成为块级元素,使用文本缩进属性和隐藏溢出(将文本方式推向左侧)隐藏文本.

#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;
}

浮动ul标签中的列表元素并为它们设置一些样式.

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

将“额外”导航向右浮动而不是向左浮动.

在这里看到它：http://jsfiddle.net/6F5ky/

点赞