Question

我试着看几个网页，但似乎都没有解决我遇到的具体问题。我正在尝试创建一个网页，我正在尝试将一个表格对齐到网页的左侧，而其余的则在中心对齐。然而，在中心对齐的项目被推到左对齐表所在的右侧。如何在中心对齐某些东西而不会与页面左侧对齐的东西发生干涉？这是我的代码。

`<!doctype html>
<title> Webpage.</title>
<body>
<body background="Data/Back.jpg">
    <table style="float: left" bgcolor="#9999FF" border="solid">
    <tr>
    <th><ul><h1>Directory.</h1></ul></th></tr>
    <br>
    <tr><td><li><a href="subpages/skills.html">Skills.</li></td></tr>
    <tr><td><li><a href="subpages/experience.html">Experience.</li></td>
    </tr>
    <tr><td><li><a href="subpages/References">References.</li></td></tr>
    <tr><td><li><a href="subpages/ContactInfo.html">Contact Info.</li>
    </td></tr>
    <tr><td><li><a href="subpages/Resume.html">Resume.</li></td></tr>
    </table>
<center>
    <table bgcolor="CCCCCC" border="3px solid black">
    <tr>
    <th><h1><b><u>Name/Header.</u></b></h1></th>
    </tr>
    </table>
    <img src="Data/Me.jpg" width="25%">
    <table bgcolor="#819FF7" width="50%" border="solid">
        <tr>
        <th>About me.</th>
        </tr>
        <tr>
        <td>Subject
        </td>
        </tr>
    </center>
<style type="text/css">
    h1{
        color: #0404B4
    }
    th{
        color: #61380B
}
td{
        color: #8A0829
    }
</style>
</body>`

Answer 1

只需从第一张表中删除float: left即可。浮动元素意味着当该元素小于父元素宽度的100％时，其他元素将尝试占用任何剩余宽度。或者，之后使用clear: both 清除浮动广告。

这是一个示例，格式干净，并删除float: left。

＆＃13;

h1 {
  color: #0404B4;
}

th {
  color: #61380B;
}

td {
  color: #8A0829;
}

＆＃13;

<body>
  <table bgcolor="#9999FF" border="solid">
    <tr>
      <th>
        <div style="margin-left: 2em">
          <h1>Directory.</h1>
        </div>
      </th>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/skills.html">Skills.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/experience.html">Experience.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/References">References.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/ContactInfo.html">Contact Info.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/Resume.html">Resume.</a>
          </li>
        </ul>
      </td>
    </tr>
  </table>
  <center>
    <table bgcolor="#CCCCCC" border="3px solid black">
      <tr>
        <th>
          <h1><b><u>Name/Header.</u></b></h1>
        </th>
      </tr>
    </table><img src="Data/Me.jpg" width="25%">
    <table bgcolor="#819FF7" border="solid" width="50%">
      <tr>
        <th>About me.</th>
      </tr>
      <tr>
        <td>Subject</td>
      </tr>
    </table>
  </center>
</body>

＆＃13;

希望这有帮助！：）

将两个表格对齐，其中一个表格错误放置另一个表格

1 个答案: