IE float нет ошибки заполнения

Question

Я пытаюсь создать форму HTML и плаваю надписи влево, а вводы вправо, теперь в FF все работает нормально и в IE8, но когда я перехожу к IE7, кажется, что разрывы строкполностью исчезнуть, у меня НЕТ пространства между моими элементами, что бы это могло быть?

Как я могу это исправить?

                <p>
                  <span class='left'><label for='gender'>Gender: </label></span>
                  <span class='right'><select name='gender' id='gender'>
                    <option>Select one</option>
                    <option>Male</option>
                    <option>Female</option>
                  </select>
                  </span>
                </p>
                <br />
                <p>
                  <span class='left'><label for='name'>Name: </label></span>
                  <span class='right'><input name='name' id='name' /></span>
                </p>
                <br />

Теперь по какой-то причине у меня НЕТ пространства между абзацамив IE7, хотя я использую перерывы.

Заранее спасибо.

Answer 1

когда ваш второй абзац начинается, первый все еще всплывает. вам нужен clear:both; или clear:right;, чтобы ваш перерыв сработал.

.clearer { clear: both; }

<p class="right">hi</p>
<div class="clearer"></div>
<br />
<p>hi</p>

Answer 2

Ваши теги P имеют только плавающее содержимое, поэтому не имеют высоты

Содержимое ваших тегов p имеет только плавающую метку и плавающий вход, поэтому они рассматриваются как высотаноль в IE.Вероятно, вы не найдете кросс-браузерного исправления для этого, если не хотите установить явную высоту для

или добавить в нее неплавающий элемент.

Я бы порекомендовал пропустить
и просто делать работу с полями.Далее следует пример, предполагая, что вы обернули

.

CSS:

.left { float: left; }
.right { float: right; }
.wrap p { clear: both; height: 1em; margin: 0 0 1em 0; padding: 0; }
.wrap br { display: none; }

HTML:

<form>
<div class="wrap">

 <p>
  <span class='left'><label for='gender'>Gender: </label></span>
  <span class='right'>
   <select name='gender' id='gender'>
    <option>Select one</option>
    <option>Male</option>
    <option>Female</option>
   </select>
  </span>
 </p>
 <br />
 <p>
  <span class='left'><label for='name'>Name: </label></span>
  <span class='right'><input name='name' id='name' /></span>
 </p>
 <br />

</div>
</form>

Answer 3

Какой элемент оборачивает вышеуказанный код?Попробуйте установить clear: both; для тегов <br/>, желательно с классом css:

.clear { clear:both; }

<br class="clear" />