全球{

Question

我正在为新网站制作模板。我试图让一些容器排好我想要的东西，我遇到了一些麻烦。我试图从几个div创建一个导航栏，然后在这个块下面有一个包含几个容器的主体。

我被困在1）使导航栏自动对齐到中间，2）让身体从导航栏开始。

 <div id="navBar">
<div class = "buttons" id="home">Home</div>
<div class = "buttons" id="calendar">Calendar</div>
<div class = "buttons" id="gallery">Gallery</div>
<div class = "buttons" id="current">Dragon Rydas</div>
<div class = "buttons" id="prospective">Future Rydas</div>
<div class = "buttons" id="fallen">Fallen Rydas</div>
<div class = "buttons" id="contact">Contact</div>
<div class = "buttons" id="affiliates" align="center">Affiliates</div>
</div>


<div id="body">
<div class="content" id="Home">A</div>
<div class="content" id="CRydas">B</div>
<div class="content" id="Contact">C</div>
</div>

我的相关信息是：

#navBar {
    float:left;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    color: #09F;
    size: 18px;
    font-size: 18px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    right: auto;
    left: auto;
}

.buttons {
    float: left;
    padding: 5px;
    width:115px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:18px;
    color: #0CF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
}

感谢您的帮助。

Answer 1

不要将DIV用于菜单，使用列表。这为您提供了简单的语义HTML，而无需额外的ID和类。

<div class='root'>
    <div class='menu'>
       <ul>
          <li><a href="...">Item</a></li>
      </ul>
    </div>
    ... your content ...
</div>

然后浮动你的LIs

.menu li {
  float:left
}

并设置锚点样式：

.menu a {
   display:block;
   ... your styles ...
}

然后使用包装器将整个事物居中，在这种情况下为“root”：

.root {
    width:960px;
    margin-left:auto;
    margin-right:auto;
}

Answer 2

我通常使用全局规则根据页面宽度将所有内容居中..

示例：

全球{

 margin-left: auto;
 margin-right: auto;
 width: "Enter your total width"; /* mandatory to be centered */
 padding: 0px;
  }

然后jus在整个html周围使用它..它将导航栏的中心，它下面的所有内容都将是你指定的宽度..

Answer 3

您需要将此应用于.buttons和#navbar {

#navBar {
    float:left;
    width:auto;
       padding:0;
margin:0 auto;
    color: #09F;
    size: 18px;
    font-size: 18px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    right: auto;
    left: auto;
}

.buttons {
    float: left;
    padding: 5px;
    width:115px;
    padding:0;
margin:0 auto;
    text-align:center;
    font-size:18px;
    color: #0CF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
}

但您应该使用无序列表<ul>进行导航。

Answer 4

我不确定我是否关注但尝试从#navBar中移除float: left;并添加'clear：both;'到#body {}。

DIV定位和对齐问题

4 个答案:

全球{