为什么这个页面使用这么窄的表格进行渲染?

时间:2018-02-05 01:45:09

标签: html

我使用Django,我有这个工作。我必须以某种方式打破它。 输入字段的长度不应相同 - 门牌号字段的大小约为其他字段的1/3。我在FF和Gnome看到了这张狭窄的桌子。

这是HTML



<!DOCTYPE html>
<html>
  <head>
    <title>anti-fracking initiative</title>
  </head>
  <body>
<h1>Packet # 1, signature # 3</h1>

<form action="/oil/1/3/" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='<redacted>' />
<input type='hidden' name='phase' value='1' />
<table border="1" cellpadding="8" cellspacing="0">
  <tr><th align="right">First Name:</th><td><input type="text" name="name_first" value="" id="name_first" maxlength="32" style="width:350"</td></tr>
  <tr><th align="right">Last Name:</th><td><input type="text" name="name_last" value="" id="name_first" maxlength="32" style="width:350"> </td></tr>
  <tr><th align="right">House Number:</th><td><input type="text" name="house_number" value="" id="house_number" maxlength="10" style="width:100"></td></tr>
  <tr><th align="right">Street:</th><td><input type="text" name="street" value="" id="street" maxlength="32" style="width:350"></td></tr>
  <tr><th align="right">City:</th><td><input type="text" name="city" value="" id="city" maxlength="32" style="width:350"></tr>
  <tr><td>&nbsp;</td><td align="right"><button type="reset" style="color:red"><strong>Reset</strong></button> <button type="submit" value="search" name="action" style="background-color:lightgreen" ><strong>Search</strong></button></td></tr>
</table>
</form>

  </body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

你忘记了px

&#13;
&#13;
<!DOCTYPE html>
<html>
  <head>
    <title>anti-fracking initiative</title>
  </head>
  <body>
<h1>Packet # 1, signature # 3</h1>

<form action="/oil/1/3/" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='<redacted>' />
<input type='hidden' name='phase' value='1' />
<table border="1" cellpadding="8" cellspacing="0">
  <tr><th align="right">First Name:</th><td><input type="text" name="name_first" value="" id="name_first" maxlength="32" style="width:350px;"</td></tr>
  <tr><th align="right">Last Name:</th><td><input type="text" name="name_last" value="" id="name_first" maxlength="32" style="width:350px;"> </td></tr>
  <tr><th align="right">House Number:</th><td><input type="text" name="house_number" value="" id="house_number" maxlength="10" style="width:100px;"></td></tr>
  <tr><th align="right">Street:</th><td><input type="text" name="street" value="" id="street" maxlength="32" style="width:350px;"></td></tr>
  <tr><th align="right">City:</th><td><input type="text" name="city" value="" id="city" maxlength="32" style="width:350px;"></tr>
  <tr><td>&nbsp;</td><td align="right"><button type="reset" style="color:red"><strong>Reset</strong></button> <button type="submit" value="search" name="action" style="background-color:lightgreen" ><strong>Search</strong></button></td></tr>
</table>
</form>

  </body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您是否尝试过设置标签的宽度?也许尝试宽度:100%?