Question

我确信之前已经提出这个问题，所以我道歉但我找不到适合我的答案 - 或许我只是不理解。

我是HTML＆amp; 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;
}

Answer 1

您可以使用表格并将列指定为相等的宽度，并将其放在占据宽度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>

并且

在页面上拉伸图像的导航栏？

1 个答案: