Float: прямо в IE7 сбрасывается на новую строку

Я немного застрял в проблеме с плавающей точкой, поэтому я надеюсь, что сообщество снова поможет мне. У меня есть новый webform здесь. Как обычно, все выглядит хорошо, но IE7 (или IE8 в совместимости).

По какой-то причине некоторые из контейнеров заканчиваются полем формы в новой строке под текстом формы. CSS не моя сильная сторона, иначе я смогу исправить это, я уверен. Может ли кто-нибудь сказать мне, что мне здесь не хватает?

Я попробовал добавить float: оставил текст формы, но в итоге появился целый беспорядок.

Ответ 1

Попробуйте небольшую разметку изменения: поместите элементы с поплавком перед элементами без него (из той же строки). Это должно помочь.

Ответ 2

Я знаю, что это было давно, так как это было опубликовано, но я нашел решение, которое мне нравится для этого. Суть использует тег 'expression' в вашем CSS для IE7 только для перемещения плавающего элемента в качестве первого элемента родителя в DOM. Он будет семантически корректным для всех других браузеров, но для IE7 мы модифицируем DOM для перемещения плавающего элемента.

В моем случае у меня есть:

<div>
    <h1></h1>...<p>any other content...</p>
    <small class="pull-right"></small>
</div>

В моем CSS для pull-right я использую:

.pull-right {
    float:right;
    *zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}

В результате IE7 переносит мой <small> как первый элемент <div>, но все остальные браузеры оставляют только разметку.

Это может не сработать для всех. Технически это модифицирует разметку, но только в DOM для IE7, а также в javascript-решении.

Кроме того, я понимаю, что с выражением могут возникать некоторые проблемы с производительностью (это медленно), поэтому, возможно, это не идеальный вариант, так много таких плавающих. В моем случае это сработало и позволило мне сохранить семантически правильный HTML.

Ответ 3

Если вы поместите свой .formText влево, поместите свой span.required влево, а затем поместите ваши входы влево, а также вы сможете выровнять их по одной строке.

Я бы немного изменил вашу разметку. ваш <span class="formText"> должен действительно быть <label>

Например:

<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName> 
</P>

и ваш css будет примерно таким:

.formRow {
  clear: both;
}
  .formRow label {
     float: left;
     width: 150px;
  }
  .formRow input {
     float: left;
  }

Ответ 4

Вы можете попытаться сделать теги span, которые у вас есть для текста, фиксированной шириной, поместить их влево и сделать то же самое для поля ввода, с которым вы хотите соответствовать. Я также рекомендую использовать тег метки вместо тега span в формах. Никакой реальной твердой причины для этого, это просто, что ярлык предназначался именно для того, что вы делаете с тегом span.

Ответ 5

То, что вы хотите сделать, - это добавить четкость: как в качестве последнего брата ваших плавающих элементов.

Так что-то вроде:

<div style="float:left;">
  <!-- children of div here -->
</div>
<div style="clear:both;">
  <!-- leave empty -->
</div>