Question

我已将菜单中每个元素的宽度设置为25％（总计100％）。参见下面的代码：

<html>
<head>
<title>Epsilon Eridani Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--page header-->

 <h1>Epsilon Eridani Project</h1>

<!--menu-->
<table width="100%" bgcolor="white" cellpadding="4" cellspacing="4">
<tr>
<td width="25%">
  <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
  <span class="menu">Home</span></td>
<td width="25%">
<td width="25%">
  <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
  <span class="menu">Eridanus</span></td>
<td width="25%">
<td width="25%">
  <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
  <span class="menu">Latest News</span></td>
<td width="25%">
<td width="25%">
  <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
  <span class="menu">Community</span></td>
<td width="25%">
</tr>
</table>
</html>

但是，在输出中，它看起来非常混乱。 See output in this image

我对为什么会这样感到困惑？感谢您的时间。

Answer 1

您有几个

 <td width="25%">

没有结账的</td>

缩进代码也是一种好习惯，这将使查找问题更容易。

<table width="100%" bgcolor="white" cellpadding="4" cellspacing="4">
  <tr>
    <td width="25%">
      <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
      <span class="menu">Home</span>
    </td>
    <td width="25%"></td>  <!-- Should this be here??  --> 
    <td width="25%">
      <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
      <span class="menu">Eridanus</span>
    </td>
    <td width="25%"></td>  <!-- Should this be here??  -->
    <td width="25%">
      <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
      <span class="menu">Latest News</span>
    </td>
    <td width="25%"></td>  <!-- Should this be here??  -->
    <td width="25%">
      <img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
      <span class="menu">Community</span>
    </td>
    <td width="25%"></td>  <!-- Should this be here??  -->
  </tr>
</table>

我希望这能使您走上正确的道路来解决您的问题。：）

菜单栏中菜单宽度不正确

1 个答案: