文字

內容的標題區）我試圖去這樣的結果與這個CSS：

@import url(//fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin); 

html, body { 
    margin:0; 
    padding:0; 
    background-color:#fff; 
    font-family: 'Droid Sans', arial, serif; 
    color: #777; 
    font-size: 14px; 
} 
a { 
    color: #2e4987; 
    text-decoration: none; 
} 
img { 
    border: 0; 
    width: 250 px; 
    height: 250px; 
    margin: auto; 
} 



#nwtBox { 
    margin: 0 auto; 
    width: 960px; 
    height: 800px; 
} 
#nwtBox h1 { 
    color: #333; 
    font-weight: normal; 
    margin: 0 0 20px 0; 
    padding: 0; 
} 
#nwtBox h1 span { 
    float: right; 
    font-size: 14px; 
    font-weight: normal; 
} 
#nwtBox h2 { 
    font-weight: normal; 
    font-size: 20px; 
    padding: 0; 
    margin: 0 0 10px 0; 
    color: #333; 
} 
#nwtBox h3 { 
    padding:0; 
    margin: 0; 
} 
#nwtBox h3 img { 
    vertical-align: middle; 
} 



#nwtBox #header { 
    width: 960px; 
    background-color:#fff; 
    height: 100px; 
    border: solid; 
    border-width:thin; 
    border-color: red; 
} 

#nwtBox #header h1 { 

    text-align: center; 
} 

#nwtBox #navigation { 

    width: 960px; 
    background-color:#fff; 
    height: 100px; 
    border: solid; 
    border-width:thin; 
    border-color:blue; 
} 
#nwtBox #navigation ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
#nwtBox #navigation ul li { 

    padding: 0 30px 0 0; 
    font-weight: bold; 
} 
#nwtBox #navigation ul li a { 
    color: #a8a8a8; 
    text-decoration: none; 
} 
#nwtBox #navigation ul li a:hover { 
    color: #2e4987; 
} 
#nwtBox #navigation .main-nav { 
    width: 500px; 
    overflow: auto; 
} 


#nwtBox #navigation { 
    float: left; 
    padding: 35px 0 0 0; 
} 
#nwtBox #navigation ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
#nwtBox #navigation ul li { 
    float: left; 
    padding: 0 30px 0 0; 
    font-weight: bold; 
} 
#nwtBox #navigation ul li a { 
    color: #a8a8a8; 
    text-decoration: none; 
} 
#nwtBox #navigation ul li a:hover { 
    color: #2e4987; 
} 
#nwtBox #navigation .main-nav { 
    width: 500px; 
    overflow: auto; 
} 



#nwtBox #signupLogin { 

    float:right; 
    width: 400px; 
    overflow: none; 
    padding: 32px 0 0 0; 
    text-align: right; 
    color: #999999; 
    border: solid; 
    border-width:thin; 
    border-color:red; 
}

這個HTML

<body> 
<div id ="nwtBox"> 


    <div id ="signupLogin"> 
     <ul> 
     <li> <a href =''> Sign Up</a> 
     </li> 
     <li> <a href =''> Log In</a> 
     </li> 
    </ul> 
    </div> 
    <div id = "navigation"> 
      <ul class="main-nav"> 
      <li class="main-nav-selected"> 
       <a href="index.php">HOME</a> 
      </li> 

      <li>    
       <a href="stuff.php">STUFF</a> 
      </li> 
      <li> 
       <a href='stuff.php'>STUFF</a> 
      </li> 
      </ul> 
    </div> 
<div id ="header"> 
    <h1> TEXT</h1> 
</div> 

    </body>

，而不是期望的結果，我得到： bad layout

有什麼不對？

來源

2011-05-08 algorithmicCoder

僅供參考，你永遠關閉了'nwtbox'股利。 – eykanal 2011-05-08 04:06:29

您還使用了overflow：none，這不是一個有效的屬性。相反，我認爲你想要'溢出：隱藏'。 – lpd 2011-05-08 04:11:20

添加clear:both到導航塊

#nwtBox #navigation { 
    float: left; 
    padding: 35px 0 0 0; 
    clear:both; 
}

來源

2011-05-08 04:09:33 armonge

浮標不會與相對放置的元件干擾;內容只會流過浮動。由於您的導航和登錄框都是浮動的，因此它們不會影響內容div的位置。如果你想讓事情變得簡單，你可以簡單地給content div一個等於loginHeight + loginTopMargin + navHeight + navTopMargin的頂部空白，你就可以了。

來源

2011-05-08 04:09:53 eykanal

試試這個：

#nwtBox #navigation { 
    clear: both; 
    //remove float: left; 
    padding: 35px 0 0 0; 
}

如果你想保持float: left在#navigation，你可以用風格clear: both添加一個div到HTML代碼。

<div id="signupLogin> 
... 
</div> 

<div style="clear: both"></div> 

<div id="navigation"> 
...

來源

2011-05-08 04:24:25 Genzer

問題在CSS

文字

回答

相關問題