Как исправить комбинацию float-clear в IE7
-
20-09-2019 - |
Вопрос
У меня есть div класса field_wrapper, который содержит 3 подраздела div field_label, field_input и field_error.
Мне нужно поместить field_label, field_input рядом и field_error ниже первых двух.
Пожалуйста, посмотрите CSS-код ниже, чтобы узнать, как я этого добился. Моя проблема в том, что он не работает в IE7.очистить оба, примененные к полю_error, не работают.
Даже после долгого поиска в Google я не могу найти подходящего способа исправить это без добавления разметки 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>
Решение
Если не хотите, уберите поплавок слева.Вы можете использовать этот код-оболочку
.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>
Другие советы
Удалить float:right из 'field_error'
позвольте мне сначала сказать вам одну вещь.Если у вас есть плавающий контент в контейнере, контейнер никогда не будет содержать его до тех пор, пока вы не установите свойство переполнения контейнера скрытым или не сделаете его плавающим.нравиться
.field_wrapper
{
clear:both;
overflow:hidden;
}
Теперь он содержит все плавающие элементы.Теперь что касается вашего div-ошибки, когда вы перемещаете элементы влево, поэтому проясните: только слева, и это будет работать.
Спасибо