дисплей: встроенный; и перекрытие?

Question

У меня есть ниже. Отсюда и класс ошибок http://css.dzone.com/news/css-message-boxes-different-me

Я добавил display: встроенный в div, чтобы он не занимал весь ряд. Однако теперь вместо перехода к следующему ряду он остается в том же ряду и рисуется поверх ссылок или формы входа. Как мне правильно с этим справиться? Я не знаю, должен ли я добавить <br> (если это работает) или изменить свойство css.

<div class="login">
<form action="/login" method="Post"><div>
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Login">
</div></form></div>
<div class="error">Error back - Title</div><br>

</body>
</html>

Answer 1

display:inline заставляет его вести себя так, как будто это просто еще один элемент, который работает в обычном текстовом потоке страницы. Таким образом, если вы хотите, чтобы он был перенесен на следующую строку, тогда да, вы захотите добавить <br>. Однако, если вы просто хотите ограничить ширину окна сообщения об ошибке, но по-прежнему располагать его в отдельной строке, вам, вероятно, не нужно display:inline, во-первых, вместо этого вы просто хотите установить width: свойство, насколько бы большим оно не было (например, width:500px; для ширины 500 пикселей или width:50%; для половины ширины содержащего элемента).