Как предотвратить разрыв строки перед неупорядоченным списком?

Моя инфраструктура веб-приложений создает ошибки формы для каждого поля в неупорядоченном списке <UL> сразу же после недопустимого поля. Моя проблема в том, что мне не удалось создать стиль, чтобы ошибки (имена) были указаны в одной строке с полем формы. Разрыв строки вместо этого отображается перед <UL>.

Это html, который я пытаюсь создать, с указанием недопустимого поля, определенного сервером:

<p>  
    <label for="id_email">Email</label>  
    <input id="id_email" type="text" name="email" />  
    <span class='field_required'> *</span>  
    <ul class="errorlist"><li>This field is required.</li></ul>  
    </p>

Как предотвратить разрыв строки между "field_required" span, отображающим звездочку для каждого обязательного поля, и "errorlist", который отображается, если форма не проверяется (на сервере)?

В настоящее время я стилю:

  span.field_required {color:red; display:inline;}  
  ul.errorlist {list-style-type: none; display:inline;}  
  ul.errorlist li {display: inline; color:red; }

UPDATE: Спасибо всем за помощь!

У меня есть контроль над HTML, хотя моя фреймворк (django) по умолчанию дает ошибки как <UL>. В соответствии с замечательными предложениями я попробовал обернуть список в его собственный стиль <p> и <span>. Обтекание списка в <span> теперь работает в Firefox 3.0, но не в Safari 4.0.

Когда я проверяю элемент в Safari, кажется, что параграф закрывается непосредственно перед <UL>, хотя это не, как выглядит HTML-код.

Я наткнулся на кросс-браузерную ошибку? (Нет, см. Ниже!)

ЗАКЛЮЧИТЕЛЬНОЕ РЕШЕНИЕ: Спасибо за помощь. Вот как я, наконец, исправил проблему:

  • Заменили теги <p> вокруг компиляции с меткой поля поля с <div> в стиле clear:both;. Благодаря jennyfofenny за указание, что спецификация W3C запрещает блок (в моем случае список) внутри <p> - и таким образом выигрывает ответный тик. Вот почему Safari автоматически закрывал мой абзац перед списком, хотя Firefox позволял ему сползать.

Затем я создаю свой список таким образом:

ul.errorlist {list-style-type: none; display:inline; margin-left: 0; padding-left: 0;}
ul.errorlist li {display: inline; color:red; font-size: 0.8em; margin-left: 0px; padding-left: 10px;}

ОТВЕТЫ

Ответ 1

Как настроить тег p для отображения: inline? Это вариант?

p { display: inline; }

Что касается проблемы с тегом p... Я не верю, что спецификации W3C позволяют использовать неупорядоченный тег в теге абзаца. Из http://www.w3.org/TR/html401/struct/text.html#h-9.3.1:

Элемент P представляет собой абзац. Он не может содержать элементы уровня блока (включая сам P).

Ответ 2

ul.errorlist { display: inline; margin: 0; }

Ответ 3

Только один последний бит:

ul.errorlist {
  display: inline;
  list-style-type: none; 
}

Ответ 4

Вы просто хотите устранить пробел между абзацем и списком?

Если это так, используйте:

ul.errorlist {
    margin-top:0;
}

Затем добавьте "margin-bottom: 0;" к абзацу (или просто поместите список ошибок внутри тегов p). Если вы также хотите, чтобы список отображался в одной строке, используйте display: inline, как и другие.

Ответ 5

Если вы не можете изменить html, то ваша проблема в том, что у ul нет элемента вокруг него, который вы можете создать.

Если вы используете javascript, если вы знаете, когда произошла ошибка, вы можете добавить <p> или <span> вокруг <ul>, а затем стиль, чтобы он был встроенным.

Эта ссылка показывает около 1/2 пути вниз, используя тег <p> для этой цели.

http://www.alistapart.com/articles/taminglists/

Если вы просто пытаетесь сделать это в css, я верю, что вам не повезет. Вы можете спросить, могут ли они помещать закрывающий тег вокруг списка ошибок, чтобы вы могли его стилизовать.