0

我尝试设置输入、td、tr、table、div 和所有其他可用选项的样式。这些都是在谷歌上找到的建议，所以不要怪我。

我正在努力修复这张桌子，但它只是不想看起来像我想要的样子。

我已经使用<td style="width:100%";>, <td style="width:100px";>, <td width="100%">, <td width="100px">并继续......

第一张图片是它的外观，第二张是我需要并希望它看起来的样子：

挫折

这是代码（看起来不错没有奖励）：

<div class="mail" style="width:600px">
<form onSubmit="return checkrequired(this)" action="includes/mail.php" method="POST">
<table border="0" style="width:100%">
<tr><td><strong>First name: </strong></td><td><input tabindex="1" type="text" name="requiredfirstname" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Last name: </strong></td><td><input tabindex="2" type="text" name="requiredlastname" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Shipping address: </strong></td><td><input tabindex="3" type="text" name="requiredshippingaddress" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Shipping address 2: </strong></td><td><input tabindex="4" type="text" name="shippingaddress_2" maxlength="30"/></td></tr>
<tr><td><strong>City: </strong></td><td><input type="text" name="requiredcity" value="<?= $town ?>" maxlength="30"/><br /></td><td> *</td></tr>
<tr><td><strong>State: </strong></td><td><select name="state">
  <option value="<?= $state ?>"><?= $state ?></option>
  <option value="Alabama">Alabama</option>
  <option value="Alaska">Alaska</option>
  <option value="Arizona">Arizona</option>
  <option value="Arkansas">Arkansas</option>
  <option value="California">California</option>
  <option value="Colorado">Colorado</option>
  <option value="Connecticut">Connecticut</option>
  <option value="Delaware">Delaware</option>
  <option value="Florida">Florida</option>
  <option value="Georgia">Georgia</option>
  <option value="Hawaii">Hawaii</option>
  <option value="Idaho">Idaho</option>
  <option value="Illinois">Illinois</option>
  <option value="Indiana">Indiana</option>
  <option value="Iowa">Iowa</option>
  <option value="Kansas">Kansas</option>
  <option value="Kentucky">Kentucky</option>
  <option value="Louisiana">Louisiana</option>
  <option value="Maine">Maine</option>
  <option value="Maryland">Maryland</option>
  <option value="Massachusetts">Massachusetts</option>
  <option value="Michigan">Michigan</option>
  <option value="Minnesota">Minnesota</option>
  <option value="Mississippi">Mississippi</option>
  <option value="Missouri">Missouri</option>
  <option value="Montana">Montana</option>
  <option value="Nebraska">Nebraska</option>
  <option value="Nevada">Nevada</option>
  <option value="New Hampshire">New Hampshire</option>
  <option value="New Jersey">New Jersey</option>
  <option value="New Mexico">New Mexico</option>
  <option value="New York">New York</option>
  <option value="North Carolina">North Carolina</option>
  <option value="North Dakota">North Dakota</option>
  <option value="Ohio">Ohio</option>
  <option value="Oklahoma">Oklahoma</option>
  <option value="Oregon">Oregon</option>
  <option value="Pennsylvania">Pennsylvania</option>
  <option value="Rhode Island">Rhode Island</option>
  <option value="South Carolina">South Carolina</option>
  <option value="South Dakota">South Dakota</option>
  <option value="Tennessee">Tennessee</option>
  <option value="Texas">Texas</option>
  <option value="Utah">Utah</option>
  <option value="Vermont">Vermont</option>
  <option value="Virginia">Virginia</option>
  <option value="Washington">Washington</option>
  <option value="West Virginia">West Virginia</option>
  <option value="Wisconsin">Wisconsin</option>
  <option value="Wyoming">Wyoming</option>
</select></td></tr>
<tr><td><strong>Country: </strong></td><td> 
<select name="country">
  <option value="<?= $country ?>"><?= $country ?></option>
  <option value="US">United States</option>
  <option value="Canada">Canada</option>
</select></td></tr>
<tr><td><strong>Postal code: </strong></td><td><input type="text" name="requiredpostalcode" value="<?= $record->postal_code; ?>" maxlength="9"/></td><td> *</td></tr>
<tr><td><strong>Phone number: </strong></td><td><input type="text" name="areacode" value="<?= $record->area_code; ?>" maxlength="3"/>
<input tabindex="5" type="text" name="phonedigit3" maxlength="3"/>
<input tabindex="6" type="text" name="phonedigit4" maxlength="4"/></td></tr>
<tr><td><strong>E-mail: </strong></td><td><input tabindex="7" type="text" name="requiredemail" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Message: </strong></td><td><textarea tabindex="8 "name="message" maxlength="250"></textarea></td></tr>
<tr><td><input tabindex="9" type="submit" value="Send"></td></tr>
</table>
</form>
4

5 回答 5

0

不要为 TD 元素设置样式，为实际控件设置样式（Input、Select 等）

于 2013-05-24T21:07:19.177 回答
0

该style属性必须应用于input; 不是表格单元格。

<input style="width: ...
于 2013-05-24T21:07:25.850 回答
0

我不确定它在其他浏览器中的效果如何，但这在 chrome 中看起来不错：

<tr>
<td><strong>Phone number: </strong></td>
<td>
<input type="text" name="areacode" value="<?= $record->area_code; ?>" maxlength="3" style="width:30px;"/>
<input tabindex="5" type="text" name="phonedigit3" maxlength="3" style="width:30px;"/>
<input tabindex="6" type="text" name="phonedigit4" maxlength="4" style="width:75px;" />
</td>
</tr>

请注意，这在不同的浏览器中看起来是一致的，您可能需要明确设置所有输入的宽度，在您的 css 中是这样的：

input[type="text"], select {
    width: 150px;
}
于 2013-05-24T21:12:20.880 回答
0

目前，从上面的来源来看，表格的宽度为“100 %”，这意味着所有可用的水平空间。

TD 没有任何宽度预设，因此分布“均匀”，每个 1/3 或 33%。

这是可能的，因为内部元素（输入和文本节点）也没有任何宽度预设。

您可以给 TD 一个宽度，但这不会改变输入的任何内容，它们保持在大约 30 个字符的“默认”值。

实现您想要的最简单的方法：

1.) 保持原样。2.) 明确设置输入字段的宽度和'*'文本节点你想要什么

#firstname {
width: 135px;
}


 <tr><td><strong>First name: </strong></td><td><input tabindex="1" type="text" 
name="requiredfirstname" id="firstname" maxlength="30"/></td><td> *</td></tr>
于 2013-05-24T21:20:09.063 回答
0

<input type=tel>您可以通过对电话号码使用单个字段来避免该问题。将其分成三个字段不利于可用性（例如，用户不能方便地剪切和粘贴他的电话号码）。

如果您继续使用三个字段作为电话号码，则需要设置这些字段的宽度，以便它们的组合宽度加上它们之间的任何间距等于同一列其他单元格中的字段宽度。这是可能的，但很麻烦，并且会使布局更加僵硬（像素宽度）。

于 2013-05-25T04:48:38.187 回答