Html DIV定位和对齐问题

我正在为一个新网站制作模板。我在试着让一些容器按照我想要的方式排列时遇到了一些困难。我试图用几个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>

---

谢谢您的帮助。

您需要将此应用于.按钮和#导航栏{

---

但是你真的应该使用无序列表来导航。

你需要将它应用到.button和#navbar{

---

但是你真的应该使用无序列表来导航。

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

例如：

全球的{

---

然后在整个html中使用它。它将使导航栏居中，它下面的所有内容都将在您指定的宽度内。

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

例如：

全球的{

---

然后在整个html中使用它。它将使导航栏居中，它下面的所有内容都将在您指定的宽度内。

我不确定是否在跟随，但请尝试删除导航栏中的

float:left；

，并将“clear:both；”添加到#body{}.

我不确定我是否在跟随，但尝试从#导航栏中删除

float:left；

，并在#body{}中添加'clear:tweet；'。

不要在菜单中使用div，使用列表。这样可以提供简单的语义HTML，而不需要额外的ID和类

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

并设置锚固件的样式：

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

然后使用包装器将整个内容居中，在本例中为“根”：

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

---

不要在菜单中使用div，而是使用列表。这样可以提供简单的语义HTML，而不需要额外的id和类

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

并设置锚固件的样式：

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

然后使用包装器将整个内容居中，在本例中为“根”：

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

---

同意，但我认为您需要为列表项设置

width:115px；

或

display:inline；

。否则，它们将默认为100%宽度。不，锚获得的是样式，而不是LIs。所以将A的宽度设置为115px。好的，我已更正…前几天我遇到了一个问题，我的LIs被设置为100%宽度…它们是我一直在继承一个类，但我不知道它会影响到他们。我还是解决了这个问题。我计划在对所有内容进行样式设置和定位后添加一些jquery UI内容。我是否仍应该使用列表路径进行导航？你应该尽可能使用列表进行导航。这在语义上是有意义的。同意，但我认为你不需要这样做o为列表项设置

width:115px；

或

display:inline；

。否则它们将默认为width 100%。不，锚定获取样式，而不是LIs。所以将A的宽度设置为115px。好的，我站更正了…前几天我遇到一个问题，我的LIs被设置为100%宽度…它们一定是从一个我没有意识到的类影响了他们。无论如何，我解决了这个问题。我计划在我对所有内容进行了样式和定位之后添加一些jquery UI内容。我是否应该继续使用列表路径进行导航？你应该尽可能使用列表进行导航。这在语义上是有意义的。

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