Я создал это, чтобы просто объяснить мою проблему. Это некоторые элементы списка, отображаемые в виде встроенных блоков. У меня был оригинальный метод, который тоже не работал, поэтому я использовал этот CSS .
http://jsbin.com/upexu/edit
Это прекрасно работает в FF и IE7, как автономный.
К сожалению, в моей реализации на моем сайте он не отображается правильно в IE7 (они отображаются друг над другом).
Firefox
IE7
Теперь кто-нибудь может сказать мне, почему они не работают в моем примере (см. Изображения выше и посмотрите на сайт, он справа) (не может пропустить это).
Кажется, это работает в IE7, если я даю элементам списка явную ширину - но это кажется опасным, а также дополнительным обслуживанием, которое я не хочу делать. Я, вероятно, мог бы сделать li#nsw { width: 3.5em }, но уродливо, и я не должен должен.
Я использую Сброс CSS Эрика Мейера: перезагрузка .
Если вы знаете решение, пожалуйста, сообщите!
Спасибо.
Обновление
Вот HTML-код флажков
<ul class="checkboxes">
<li><input type="radio" id="free-case-review-nsw" value="nsw" name="state" /><label for="free-case-review-nsw"><acronym title="New South Wales">NSW</acronym></label></li>
<li><input type="radio" checked="checked" id="free-case-review-qld" value="qld" name="state" /><label for="free-case-review-qld"><acronym title="Queensland">QLD</acronym></label></li>
<li><input type="radio" id="free-case-review-nt" value="nt" name="state" /><label for="free-case-review-nt"><acronym title="Northern Territory">NT</acronym></label></li>
<li><input type="radio" id="free-case-review-other" value="other" name="state" /><label for="free-case-review-other">Other</label></li>
</ul>
А вот и CSS
#free-case-review-form .checkboxes {
border: 1px solid #000;
padding: 5px 0;
margin-bottom: 8px;
overflow: hidden;
}
#free-case-review-form .checkboxes li {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* for ie */
zoom: 1;
overflow: hidden;
}
#free-case-review-form .checkboxes li input {
display: inline;
width: auto;
border: none;
margin-bottom: 0;
padding: 0;
float: left;
}
#free-case-review-form .checkboxes li label {
display: inline; /* just an attempt - they should be block level anyway */
float: right;
}
Хотя я рекомендую взглянуть на сайт выше, поскольку CSS наследуется гораздо больше, особенно с помощью сброса стиля.