CSS菜單欄 - 需要3個div嗎？

我爲我的網站創建了一個菜單欄，我想知道如果我正確地做到了這一點。CSS菜單欄 - 需要3個div嗎？

有沒有更好的方法來達到同樣的效果？它使用3個div似乎過分。

這裏是我當前如何處理它：

<!DOCTYPE html> 
<html> 
<head> 

<style type="text/css"> 
#topbar { 
    background: #487BC0; 
    width: 100%; 
} 

#container { 
    width: 960px; 
    margin: 0 auto; 
} 

#links { 
    padding: 15px 0 15px 840px; 
    color: #fff; 
    font-size: 14px; 
    margin-bottom: 30px; 
} 

#content { 
    position: relative; 
    background: #f6f6f6; 
    width: 960px; 
    height: 100%; 
    margin: 0 auto; 
} 

</style> 

</head> 
<body> 

<div id="topbar"> 
    <div id="container"> 
     <div id="links">Login | Register</div> 
    </div> 
</div> 

<div id="content">Content goes here</div> 

</body> 
</html>

來源

2013-05-29 Brian Smith

如果你寫的那件自己，你應該知道如何縮短/修剪下來。 – hjpotter92

我沒有上師，但也許這樣的事情會工作？

<!DOCTYPE html> 
<html> 
<head> 

<style type="text/css"> 
#container { 
background: #487BC0; 
width: 100% 
min-width: 960px; 
margin: 0 auto; 
} 

#container > span { 
display: block; 
padding: 15px 0 15px 840px; 
color: #fff; 
font-size: 14px; 
margin-bottom: 30px; 
} 

#content { 
position: relative; 
background: #f6f6f6; 
width: 960px; 
height: 100%; 
margin: 0 auto; 
} 

</style> 

</head> 
<body> 

<div id="container"> 
    <span>Login | Register</span> 
</div> 

<div id="content">Content goes here</div> 

</body> 
</html>

話又說回來，即時通訊沒有大師O.o

來源

2013-05-29 05:08:30 webdesChris

謝謝，我可以用這個工作。 –

刪除#topbar，如果你不想讓藍色背景舒展否則其好吧，我想..

有許多解決方案相同的問題

來源

2013-05-29 04:51:13

我的路剝皮這隻貓。我看到它的方式，寬度很常見，所以只設置一次。

HTML

<div class="container"> 
    <div class="topBar">Login | Register</div> 
    <div class="content">content</div> 
</div>

CSS

.container 
{ 
    width:960px; 
    margin: 0 Auto; 

} 

.topBar 
{ 
    background-color:#487BC0; 
    text-align:right; 
    margin-bottom:30px; 
    padding: 15px 15px 15px 15px; 
    color: #fff; 
    font-size: 14px; 
} 

.topBar div 
{ 
    padding: 15px 0 15px 840px; 
    color: #fff; 
    font-size: 14px; 
    margin-bottom: 30px; 
} 

.content 
{ 

    background-color:#f6f6f6; 
}

例子：http://jsfiddle.net/V9DGp/

來源

2013-05-29 05:10:56

CSS菜單欄 - 需要3個div嗎？

回答

相關問題