DIV定位和對齊問題

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>

和我有相關的CSS是：

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

然后浮動你的LI

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

然后在整個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

我不確定是否要跟蹤，但嘗試刪除float: left; 從#navBar並添加'clear：both;' 給#body {}。