居中導航欄 - CSS

我正在製作自己的博客，我還沒有一個域，所以它不是現場（我一直在建立網站與不同的目錄作爲網頁的文件夾）。我一直在博客上工作，我正在尋找一個簡單的導航菜單。我在互聯網上找到了一個。我試圖集中導航欄，我嘗試了很多解決方案，爲其他人的網站工作，但它不適用於我的。這是代碼（我已經調整了它我自己的顏色和導航標題）居中導航欄 - CSS

<ul id="list-nav"> 
<li><a href="../index.html">Home</a></li> 
<li><a href="../books/books.html">Books</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="../contact/contact.html">Contact</a></li> 
</ul>

這是CSS：「幫我歐比旺·克諾比你我唯一的希望」

ul.list-nav { 
list-style:none; 
width:525px; 
margin-right: auto; 
margin-left: auto; 
} 

ul#list-nav li { 
display:inline; 
} 

ul#list-nav li a { 
text-decoration:none; 
padding:5px 0; 
width:150px; 
background:#383838; 
color:#eee; 
float:left; 
border-left:1px solid #fff; 
} 

ul#list-nav li a:hover { 
margin-right: auto; 
margin-left: auto; 
background:#cccccc; 
color:#000; 
}

來源

2012-11-26 Seth Urquhart

您能否澄清一下哪些不適用於此代碼，以及您要查找的結果？ – KatieK

我編輯它，我想中心我的導航菜單，我想我有一些代碼是取消任何我試圖做的修復它。感謝您的通知。我沒有意識到我忘記說明我的問題。這個鏈接是我的整個代碼html和css：http://jsfiddle.net/Sederu/ZLYXr/ –

我會wrap整個頁面在<div class="wrap">裏面。你在代碼中聲明margin兩次，所以我會刪除第一次出現，並把它想：

ul#list-nav { 
    padding: 0; 
    list-style: none; 
    width: 725px; //NOTE I have increased the width value. 
    margin: 0 auto; 
}

此外，發現

ul { 
    display: inline; 
    text-decoration: none; 
    color: black;}

[周圍線20，並刪除display: inline;規則。這應該解決你的問題。查看現場示例here。

來源

2012-11-26 23:52:11 Boris

是否有必要包裝整個頁面？還有必要將ul＃list-nav的寬度更改爲725px？ –

謝謝sooooooooooo多！有效！ –

沒有必要「包裝」所有東西，我使用這種方法，因爲它可以更好地控制頁面元素。我已經將寬度設置爲725像素，就像一個例子，因爲前面的寬度是不夠的。很高興聽到它的工作。 – Boris

你的第一個CSS選擇器是尋找一個ul與類的list-nav，不是ID的list-nav。將您的第一條CSS規則更改爲：

ul#list-nav { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    width: 525px; 
    margin: 0 auto; 
}

而且您的導航欄以神奇爲中心。請參閱此jsFiddle進行演示>http://jsfiddle.net/TLaN5/。顯然你需要修改父項的寬度ul，以便容納內部元素的正確寬度，但你應該明白。

來源

2012-11-26 22:51:30 BenM

我做了規則的變化，它沒有改變任何東西。它仍然卡在最左邊。你認爲我的其他一些代碼可能會取消某些內容嗎？ –

幾乎可以肯定。你檢查了我發佈的jsFiddle嗎？這是一個工作示例。 – BenM

是的，我看到了。我意識到它的作品，如果它只是代碼。如果我給你我所有的HTML和CSS你認爲你可以找到什麼取消它？ –

你可以給一個定義大小的UL和中心的內容（除去顯示在線，確實）

ul { 
width: 960px; 
margin: 0 auto; 
text-align: center; 
}

然後顯示子li元素爲內聯塊：

ul li { 
display: inline-block; 
}

嵌入塊屬性將不會在ie7中工作，因此請首先檢查您的瀏覽器目標...

另一種方法是隻使用好ol'

ul li { 
float: left; 
} 

ul:after { 
display: block; 
content: ""; 
clear: both; 
}

但李將不會在UL內的中心位置，你將不得不使用JavaScript，如果你絕對要做到這一點動態（不分配一個固定到每個L1）。

來源

2012-11-27 00:18:49 CAP

居中導航欄 - CSS

回答

相關問題