it-swarm.com.ru

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

Мой каркас веб-приложения отображает ошибки формы для каждого поля в неупорядоченном списке <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; }  

ОБНОВЛЕНИЕ : Спасибо за помощь всем на сегодняшний день!

У меня есть контроль над 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;}
11
dj.

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

p { display: inline; }

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

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

11
jennyfofenny

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

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

ul.errorlist {
    margin-top:0;
}

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

1
user172134
ul.errorlist { display: inline; margin: 0; }
1
Daniel A. White

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

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

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

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

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

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

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

0
James Black