Question

我正在尝试创建类似于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;
  }

Answer 1

试一试：

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/

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

1 个答案: