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

<p>мой каркас веб-приложения отображает ошибки формы для каждого поля в неупорядоченном списке <code><ul></code> сразу после недопустимого поля. моя проблема в том, что я не смог стилизовать вещи так, чтобы ошибки отображались в одной строке с полем формы. вместо этого перед строкой <code><ul></code> отображается разрыв строки.</p><p>это html, который я пытаюсь стилизовать, показывая недопустимое поле, определенное сервером:</p><pre><code><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> </code></pre><p>как я могу предотвратить разрыв строки между 'field\_required' <code>span</code>, отображающим звездочку для каждого обязательного поля, и 'errorlist', который отображается, если форма не проверяется (на сервере)?</p><p>в настоящее время я занимаюсь стайлингом:</p><pre><code> span.field\_required {color:red; display:inline;} ul.errorlist {list-style-type: none; display:inline;} ul.errorlist li {display: inline; color:red; } </code></pre><p><strong>обновление :</strong> спасибо за помощь всем на сегодняшний день!</p><p>у меня есть контроль над html, хотя мой фреймворк (django) по умолчанию дает ошибки как <code><ul></code>. в соответствии с замечательными предложениями я попытался обернуть список в его собственный стиль <code><p></code> и <code><span></code>. перенос списка в <code><span></code> теперь работает в firefox 3.0, но не в safari 4.0.</p><p>когда я проверяю элемент в safari, кажется, что абзац закрывается непосредственно перед <code><ul></code>, хотя это <strong>не</strong> как выглядит исходный код html.</p><p>я наткнулся на кросс-браузерную ошибку? (нет. см. ниже!)</p><p><strong>заключительное решение :</strong> спасибо за помощь. вот как я наконец исправил проблему:</p><ul> <li>заменили теги <code><p></code> вокруг комбо-метки поле-ошибка на <code><div></code> в стиле <code>clear:both;</code>. спасибо jennyfofenny за указание на то, что спецификация w3c запрещает блок (в моем случае список) внутри <code><p></code> - и, таким образом, выигрывает галочку ответа. вот почему safari автоматически закрывал мой абзац перед списком, хотя firefox позволил ему скользить.</li> </ul><p>затем я оформляю свой список так:</p><pre><code>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;} </code></pre>

<p>как насчет установки тега p для отображения: также встроенного? это вариант?</p><pre><code>p { display: inline; } </code></pre><p>что касается вопроса о теге p ... я не верю, что спецификации w3c допускают неупорядоченный тег списка в теге абзаца. от <a href="http://www.w3.org/tr/html401/struct/text.html#h-9.3.1">http://www.w3.org/tr/html401/struct/text.html#h-9.3.1</a> :</p><blockquote> <p>элемент p представляет абзац. он не может содержать элементы уровня блока (включая сам p).</p> </blockquote>

<p>вы просто хотите устранить пробел между абзацем и списком?</p><p>если это так, используйте:</p><pre><code>ul.errorlist { margin-top:0; } </code></pre><p>затем добавьте "margin-bottom: 0;" к абзацу (или просто поместите список ошибок в теги p). если вы также хотите, чтобы список отображался в одной строке, используйте display: inline, как предлагали другие.</p>

<pre><code>ul.errorlist { display: inline; margin: 0; } </code></pre>

<p>только один последний бит:</p><pre> ul.errorlist { display: inline; list-style-type: none; } </pre>