無法獲取導航欄使用填充

1）固定導航欄thickeness因此它加上了8px填充上方和下方。現在看起來像是20-30px。導航欄應該100％寬，導航欄菜單以960像素爲中心。

2）左對齊網站標題，並將菜單鏈接對齊在同一行上。

HTML

<header> 

    <div class="nav_top_bar"> 
    <nav class="nav_top_menu"> 
     <ul> 
     <li class="nav_top_title">Web Site Title</li> 
     <li><a href="" class="blue">Home</a></li> 
     <li><a href="" class="green">Products</a></li> 
     <li><a href="" class="orange">Services</a></li> 
     <li><a href="" class="purple">About</a></li> 
     <li><a href="" class="yellow">Contact</a></li> 
     </ul> 
    </nav> 
    </div>

CSS

.nav_top_bar { 
    background-color: #333333; 
    padding: 8px 0; 
    width: 100%; 
} 

.nav_top_menu { 
color: #c3c3c3; 
font-size: 1em; 
margin: 0 auto; 
text-align: left; 
width: 960px; 
} 

.nav_top_title { 
    padding-right: 30px; 
} 

.nav_top_menu ul { 
    list-style: none; 
    text-align: left; 
} 

.nav_top_menu ul li { 
    display: inline; 
} 

.nav_top_menu ul li a { 
    color: #c3c3c3; 
    padding: 8px 16px; 
}

來源

2014-05-23 user1052448

在你的CSS中聲明。 –

對不起，我的意思是修復導航欄的高度。 – user1052448

的微胖是由於大多數瀏覽器添加邊距和填充到ul元素的事實。
您可以在ul元素上明確設置margin: 0; padding: 0;以擺脫這些元素。

您還可以將鏈接（左側和右側）與浮動物和:first-child選擇器對齊。

這裏有一個的jsfiddle：http://jsfiddle.net/7w8CA/1/

來源

2014-05-23 19:16:17

左/右對齊至100％。如何在960像素居中的同時完成此任務，同時仍然給導航欄100％寬的背景色？ – user1052448

菜單欄居中..但內容不是。嘗試給菜單欄一個不同的顏色來看看。 –

@ user1052448對不起，在關於960px的問題中沒有看到任何內容。我會在小提琴中編輯它。基本上，你應該使用'max-width：960px'而不是'width：960px'。 –

的body和ul分配默認邊距/填充蒲式耳瀏覽器等等，這些應該被重置。

**JSfiddle **

CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.nav_top_bar { 
    background-color: #333333; 
} 

.nav_top_menu { 
color: #c3c3c3; 
font-size: 1em; 
margin: 0 auto; 
width: 960px; 
padding: 0; 
} 

.nav_top_title { 
    padding-right: 30px; 
} 

.nav_top_menu ul { 
    list-style: none; 
    margin: 0; 
     text-align: right; 
} 

.nav_top_menu ul li { 
    display: inline-block; 
} 

.nav_top_menu ul li:first-of-type { 
    float:left; 
     padding: 8px 16px; 
} 

.nav_top_menu ul li a { 
    color: #c3c3c3; 
    padding: 8px 16px; 
    display: block; 
}

來源

2014-05-23 19:22:39

你需要做的CSS規則作如下補充：

添加填充/保證金值到.nav_top_menu ul類。

.nav_top_menu ul { 
    list-style: none; 
    text-align: left; 
    padding: 0; 
    margin: 0 
}

要對齊你想要的方式，首先讓所有li文本右對齊，然後左對齊的第一個子元素：

.nav_top_menu ul li { text-align: right} 
.nav_top_menu ul li:first-child { text-align: left }

來源

2014-05-23 19:24:47

如果你的問題是，最上面一欄顯得太大在高度，你可以添加以下到您的樣式刪除<ul>元素上的默認保證金：

.nav_top_menu ul { 
    margin:0; 
}

的標題和和鏈接，你可以做到這一點，而不是，其中W生病一切都對齊，除了標題權將被向左浮動：

.nav_top_menu ul { 
    margin: 0; 
    list-style: none; 
    text-align: right; 
} 
.nav_top_menu ul li { 
    display: inline; 
} 
.nav_top_menu ul li.nav_top_title { 
    float: left; 
    padding-right: 30px; 
}

和是確保從<body>元素以及刪除默認保證金：沒有國界

body { 
    margin: 0; 
}

來源

2014-05-23 19:28:59 barrakuda

無法獲取導航欄使用填充

回答

相關問題