橫跨頁面的圖像拉伸導航欄？

-1

我確信之前已經詢問過，所以我很抱歉，但是我無法找到適合我的答案 - 或者我只是不明白。橫跨頁面的圖像拉伸導航欄？

我是新的HTML & CSS我試圖建立一個圖像的導航欄，延伸到屏幕寬度的100％。如果有人能告訴我我缺少什麼，這將是非常棒的。鏈接將在稍後更改。

<body> 
<ul> 
    <li><a href="index.html"> 
      <img src="images/logo.png" height="80" width="150"> 
     </a> 
    </li> 
    <div id="menu"> 
     <li> 
      <a href="index.html"> 
        <img src="images/homeButton.png" height="80" width="150"></a> 
     </li> 
     <li> 
       <a href="index.html"> 
        <img src="images/scratchButton.png" height="80" width="150"> 
       </a> 
     </li> 
     <li> 
       <a href="index.html"> 
        <img src="images/c++Button.png" height="80" width="150"> 
       </a> 
     </li> 
     <li> 
      <a href="index.html"> 
        <img src="images/PythonButton.png" height="80" width="150"> 
      </a> 
     </li> 
     <li> 
      <a href="index.html"> 
        <img src="images/signInButton.png" height="80" width="150"> 
      </a> 
     </li> 
    </div> 
</ul>

。

html, body { 
margin: 0; 
padding: 0; 
} 

ul { 
margin: 0; 
padding: 0 
} 

li { 
float: left; 
} 

a { 

} 

#menu { 
width: 100%; 
list-style-type: none; 
background-color: #000000; 
} 

#menu :hover{ 
background-color: yellow; 
}

來源

2014-11-23 Craig

您可以使用表格並將列指定爲等寬，並將其放置在佔據寬度100％的div中。

例如爲：

<div id="container"> 
<table> 
<col width="20%"> 
<col width="20%"> 
<col width="20%"> 
<col width="20%"> 
<col width="20%"> // maybe you can make all five statements at once 
<tr> 
<td>1st/td> 
<td>2nd</td> 
<td>3rd</td> 
<td>4th</td> 
<td>5th</td> 
</tr> 
</table> 
</div>

而且

來源

2014-11-23 02:30:29 nathanwww

橫跨頁面的圖像拉伸導航欄？

回答

相關問題