时间戳

首页 > 解决方案 > 菜单栏中的菜单宽度不合适

html - 菜单栏中的菜单宽度不合适

问题描述

我已将菜单中每个元素的宽度设置为 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>

但是，在输出中，它看起来非常混乱。请参阅此图像中的输出

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

标签： htmlcss

解决方案

你有几个

 <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>

我希望这能让你走上正确的轨道来解决你的问题。:)

推荐阅读