需要幫助對齊/居中導航欄和表的內容（CSS）

HTML

<body> 

<div class="gridContainer clearfix"> 
    <div id="header"> 
<!-- Start NavBar --> 
    <div id="navbar" name="nav-top"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">FAQ</a></li> 
     </ul> 
    </div> 
    </div> 

<!-- End NavBar/Start Content --> 

<div id="content"> 

<div id="inner"> 

<!-- Content Header --> 

    <table id="table_1"> 
    <tbody> 
     <tr id="tab_head"> 
     <th><h1>About me | Section 1</h1></th> 
     </tr> 
     <tr id="para_1"> 
     <td><h3>Hello and Welcome!</h3></td> 
     </tr> 
    </tbody> 
    </table> 

<!-- Content Body --> 

<table id="table_2"> 
    <tbody> 
    <tr> 
     <td><p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BLah Blah Blah Blah Blah Blah Blah.</p></td> 
    </tr> 
    </tbody> 
</table> 
</div> 

</div> 

<div id="my-footer">This is the content for Layout Div Tag "footer"</div> 

</div> 
<!-- Add JS --> 
</body>

CSS

#navbar { 
    width: 100%; 
    float: none; 
    margin: 0 0 3em; 
    padding: 0 0 0 0; 
    background-color: #ffffff; 
    border-bottom: 1px solid #2B9EFF; } 

#navbar ul { 
    list-style: none; 
    width: 730px; /* 730px width was 800px before, but changed to slide navbar to right */ 
    margin:0 auto; 
    overflow:hidden; } 

#navbar li { 
    float: left; } 

#navbar li a { 
    width:150px; 
    display: block; 
    padding: 10px 15px; 
    text-decoration: none; 
    font-weight:normal; 
    color: #a3a3a3; 
    border-right: 1px solid #ccc; } 

#navbar li:first-child a { 
    border-left: 1px solid #ccc; } 

a:link, a:visited { 
    background-color: #ffffff; 
    text-align: center; 
    text-transform: uppercase; 
} 

#navbar a:hover, a:active { 
    background-color: #2B9EFF; 
    color: #141414; 
    font-weight:lighter; } 

/* Content */ 

table { 
    width: 100%; 
    text-align: center; 
} 

#para_1 td { 
    text-align:center; 
} 

#table_2 { 
    width:100%; 
    text-align:justify; 
    margin 
} 

#my-footer { 
    width:100%; 
    height:80px; 
    position: fixed; 
    bottom:0; 
    left: 0; 
    clear:both; 
    background:#2B9EFF; 
    text-align:center; }

主要關心的雷，如果你還沒有注意到已經是事實，我應該坐在一切之上主導航欄，不集中在頁面上。到目前爲止我不得不忍受的是一個完美的風格，最終導致我現在擁有的東西。我似乎可以通過設置像素寬度來略微調整它，但是當我試圖用百分比來處理它時，它會被打亂。

第二個我試圖去工作的是以下內容，其中包含了我的各種抽象以及最終將承載某些其他東西（鏈接，圖像等）的內容。我以爲我可以用一張桌子工作，但我不能讓我的生活得到「抽象」（Blah）內容的集中。所以，我所做的是創建第二個表格，並認爲我可以調整該表格兩側的邊距（右側爲&），以便將所述摘要居中。

它沒有工作。

我目前正在使用Adobe CS6並開始使用液體網格佈局的頁面。我想專注於一種佈局/風格，它也會考慮用戶顯示器的整體不同分辨率/尺寸。換句話說，我希望通過手機或平板電腦查看時進行調整。

請列出任意意見。談到這件事，我是一個完全新手，所以我覺得來這裏會給我一個更好的機會去理解我做錯了什麼。

請隨時索取更多信息，但我認爲到目前爲止我所提供的內容應該足以考慮我的初步查詢。

如何調整我的導航欄？

我可以在考慮液體網格佈局的同時保持當前元素的位置/風格，還是必須嘗試不同的路徑？

爲什麼我不能在左邊添加第二張表格邊距的右側？

感謝您提供任何提示，你可以想出！

最親切的問候，

T.R.G.

來源

2015-07-18 That Random Guy

我離開了HTML它的方式，但我結束了這個CSS：

CSS

#navbar { 
    width: 100%; 
    /* float: none; */ 
    margin-bottom: 3em; 
    margin-right: auto; 
    margin-left: auto; 
    padding: 0; 
    float:none; 
    background-color: #ffffff; 
    border-bottom: 1px solid #2B9EFF; } 

#navbar ul { 
    list-style: none; 
    width: auto;/* 730px width was 800px before, but changed to slide navbar to right */ 
    margin:0 auto; 
    padding: 0 20% 0 20%; 
    overflow:hidden; } 

table { 
    width: 100%; 
} 

#table1 th, td { 
    width:auto; 
    float:none; 
    text-align:center; 
} 

#table_2 { 
    width:50%; 
    float:none; 
    margin: 0 auto; 
    text-align:justify; 
}

現在，那將是我怎麼有它，直到我想出一個辦法，通過造型橫跨整個頁面的列表。如果您注意到，放置在列表（navbar）元素（li）底部的邊框淡出並且不跨頁面，這不是我想要的。從設計角度來看，頁面看起來不一致且前衛，因爲頁腳本身橫跨頁面。所以，如果你覺得你有一個想法來解決這個問題，那就讓我發佈吧。

另外，我想感謝Peter Szombati的貢獻。

雖然它最終沒有真正幫助，但他最終給了我一些看法，導致了我的上述觀點。如果你注意到了，我確實爲他的第二張桌子（寬度）提供了造型建議。

謝謝你們夥計，

祝你有美好的一天。

T.R.G.

來源

2015-07-19 19:44:16

您必須加入這個類：

.clear { 
    clear: both; 
    float: none; 
}

CSS變化：

#navbar ul { 
    list-style: none; 
    width: 730px; 
    overflow: hidden; 
    clear: right; 
    float: right; 
    margin: 0; 
    padding: 0; 
} 

#navbar { 
    width: auto; 
    clear: right; 
    float: right; 
    padding: 0 0 0 0; 
    background-color: #ffffff; 
    border-bottom: 1px solid #2B9EFF; 
}

HTML變化：

<div id="header"> 
<!-- Start NavBar --> 
    <div id="navbar" name="nav-top"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">FAQ</a></li> 
     </ul> 
</div><div class="clear"></div> 
    </div>

來源

2015-07-18 23:17:45

它沒有工作。我試着根據你的第二篇文章編輯它，並在引用你的第一篇文章後更新了我的html，但它仍然不居中。我是否應該爲這些表格提供「清晰」的課程？另外，它爲什麼不居中？ –

謝謝你寫了什麼。我現在知道了。 –

需要幫助對齊/居中導航欄和表的內容（CSS）

回答

相關問題