我有一个 field_wrapper 类 div,它包含 3 个子 div field_label、field_input 和 field_error
我需要将 field_label、field_input 和 field_error 并排放在前两个下方。
请查看下面的 css 代码以了解我是如何实现的,我的问题是它在 IE7 中不工作。清除都应用于 field_error 不起作用。
即使在谷歌搜索了很长时间后,我也找不到不添加 HTML 标记的正确方法来解决此问题。请建议 css 提示或任何其他方法以避免额外的标记代码
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#FF0000;
float: right;
text-align:left;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name">
</div>
<div class="field_error">
<p>The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">
Address
</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
<div class="field_error">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit">
</div>
</form>
最佳答案
如果不想去掉 float 就离开了。您可以使用这个包装器代码
.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }
它每次都对我有用(IE6 也是)
更新:
我又看了一遍,稍微更改了标记,还使其成为有效的 xhtml。 只需将类放在 P 标签上,您不需要额外的 div。
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#f00;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name" />
<p class="field_error">The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">Address</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit" />
</div>
</form>
关于css - 如何修复 IE7 float 清除组合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2273107/