横跨页面的图像拉伸导航栏？

-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

横跨页面的图像拉伸导航栏？

回答

相关问题