我在表格中有一个复选框,我无法将它们对齐到左侧。
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked" /> this is a checkbox
</td>
</tr>
table.all td.cb{
color: #424242;
border:1px solid black;
margin:0 auto;
text-align:left;
}
我尝试了很多东西,但结果是这样的:
我为演示目的应用了边框。
如果我添加 float:left,我会得到:
我在另一个运行良好的网页中使用了相同的代码(该表只有 2 列)。
解决方案:
我的 .css 文件中已经有了这个,尽管 colspan="3" 奇怪地导致了这个问题
table.all td input{
width:90%;
float:left;
}
我把它改成
table.all td input.i{
width:90%;
float:left;
}
并将 class="i" 添加到所有其他输入类型,现在它工作正常。
如有必要,整个表格:
<div id="container_center">
<form>
<table class="minden">
<tr>
<td colspan="3">
<p class="title">Create new account</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="title2">Enter account holder information</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>First name: *</p>
</td>
<td colspan="2">
<p>Last name: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="firstname" size="45">
</td>
<td colspan="2">
<input type="text" name="lastname" size="45">
</td>
</tr>
<tr>
<td>
<p>Email: *</p>
</td>
<td colspan="2">
<p>Email again: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email" size="45">
</td>
<td colspan="2">
<input type="text" name="email2" size="45">
</td>
</tr>
<tr>
<td>
<p>Address 1: *</p>
</td>
<td colspan="2">
<p>Address 2:</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="address1" size="45">
</td>
<td colspan="2">
<input type="text" name="address2" size="45">
</td>
</tr>
<tr>
<td>
<p>Country: *</p>
</td>
</tr>
<tr>
<td>
<select name="country" class="sel_country">
<option value="">[Please Select]</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
</select>
</td>
</tr>
<tr>
<td>
<p>City: *</p>
</td>
<td>
<p>State/Province: *</p>
</td>
<td>
<p>Zip code: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="city" size="45">
</td>
<td>
<input type="text" name="state" size="30">
</td>
<td>
<input type="text" name="zip" size="10" class="zip">
</td>
</tr>
<tr>
<td>
<p>Phone number: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Create your login</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>Username: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" size="45">
</td>
</tr>
<tr>
<td>
<p>Password: *</p>
</td>
<td>
<p>Confirm password: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="password" size="45">
</td>
<td colspan="2">
<input type="text" name="password2" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Accept terms</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked"/>this is a checkbox
</td>
</tr>
<tr>
<td>
<ul>
<li><a href="termsofservice.html">Terms of service</a></li>
<li><a href="privacypolicy.html">Privacy policy</a></li>
</ul>
</td>
</tr>
<tr>
<td class="submit" colspan="3">
<input type="submit" name="purchase" value="Purchase" id="submitbutton">
</td>
</tr>
</table>
</form>
</div>