Question

请运行下面的代码段并解释为什么“Hey There”文本与“注册”不一致！文本？这是我用来创建表的代码。

<div style="width: 800px; margin: 0px auto 0px auto;">
  <table>
    <tr>
      <td width="60%" vallign="top">
        <h2>Hey There</h2>
      </td>

      <td width="40%" vallign="top">
        <br />
        <br />
        <h2>Sign up!</h2>
        <br />
        <br />
        <form action="#" method="POST">
          <input type="text" name="fname" size="25" placeholder="First Name" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="Last Name" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="E-mail" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="Password" />
          <br />
          <br />
          <input type="submit" name="submit" value="Submit">
        </form>
      </td>
    </tr>
  </table>
</div>

Answer 1

由于两个原因，它们没有对齐：

vallign不是属性。将其更改为valign
您有两个换行符<br />高于您的＆＃34;注册！＆＃34;文本。或将其删除，或将其添加到<H2>Hey There</H2>文字上方。

请参阅下面的示例：

＆＃13;

<div style="width: 800px; margin: 0px auto 0px auto;">
  <table>
    <tr>
      <td width="60%" valign="top">
        <h2>Hey There</h2>
      </td>

      <td width="40%" valign="top">
        <h2>Sign up!</h2>
        <br />
        <br />
        <form action="#" method="POST">
          <input type="text" name="fname" size="25" placeholder="First Name" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="Last Name" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="E-mail" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="Password" />
          <br />
          <br />
          <input type="submit" name="submit" value="Submit">
        </form>
      </td>
    </tr>
  </table>
</div>

＆＃13;

Answer 2

默认情况下，一个表在中间垂直对齐，该问题的解决方案是在顶部对齐，以便注册和嘿那里的文本可以使用css而不是html在同一级别上

在标题部分添加此代码以影响所有表格

<style>

table, th, td {
   vertical-align: top;
}

</style>

Answer 3

请尝试这个。

<div style="width: 800px; margin: 0px auto 0px auto;">
  <table>
    <tr>
      <td width="60%" vallign="top">
        <h2>Hey There</h2>
      </td>
      </tr>
      <tr>
      <td width="40%" vallign="top">
        <br />
        <br />
        <h2>Sign up!</h2>
        <br />
        <br />
        <form action="#" method="POST">
          <input type="text" name="fname" size="25" placeholder="First Name" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="Last Name" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="E-mail" />
          <br />
          <br />
          <input type="text" name="fname" size="25" placeholder="Password" />
          <br />
          <br />
          <input type="submit" name="submit" value="Submit">
        </form>
      </td>
    </tr>
  </table>
</div>

原因：您实际上忘记了</tr>的结尾。

Answer 4

这是因为你的表格结构方式，你有一行两列。

文字自动垂直居中，因此无法正确排列。您有两个选择：

要么有一张2x2的桌子，最上面一行包含你的h2＆＃34;嘿那里＆＃34;和＃34;注册＆＃34;。试试这个：

＆＃13;

<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
	<tr> <!--top row -->
		<td width="60%">
			<h2>Hey There</h2>
		</td>

		<td width="40%">
			<br />
			<br />
			<h2>Sign up!</h2>
			<br />
			<br />
		</td>
	</tr>
	<tr> <!-- Bottom row with form -->
		<td>
		<!-- Empty to make a 2x2 table -->
		</td>
		<td>
			<form action="#" method="POST">
				<input type="text" name="fname" size="25" placeholder="First Name" />
				<br />
				<br />
				<input type="text" name="fname" size="25" placeholder="Last Name" />
				<br />
				<br />
				<input type="text" name="fname" size="25" placeholder="E-mail" />
				<br />
				<br />
				<input type="text" name="fname" size="25" placeholder="Password" />
				<br />
				<br />
				<input type="submit" name="submit" value="Submit">
			</form>
		</td>
	</tr>
</table>
</div>

＆＃13;

删除您所拥有的单元格中的<br />标记＆＃34;注册！＆＃34;并为<td>代码添加vertical-align: top的其他样式。这会将垂直对齐方式从居中更改为对齐到顶部，这样您的标题就会排成一行。

Answer 5

那是因为它是基本的HTML。您将需要处理CSS。我建议使用bootstrap。

<div class="row">
<div class="col-md-3">
<h2> Hey There</h2>
</div>
<div class="col-md-3">
<table>
    <tr>
            <h2>Sign up!</h2><br /><br />
            <form action= "#" method="POST">
                <input type="text" name="fname" size="25" placeholder="First Name" /><br /><br />
                <input type="text" name="fname" size="25" placeholder="Last Name" /><br /><br />
                <input type="text" name="fname" size="25" placeholder="E-mail" /><br /><br />
                <input type="text" name="fname" size="25" placeholder="Password" /><br /><br />
                <input type="submit" name="submit" value="Submit">
            </form>
        </td>
    </tr>
</table>
</div>
</div>

希望这适合你！

如何在HTML表格中将一个文本与其他文本对齐

5 个答案: