html - 显示 : inline; and overlapping?

Question

我有以下内容。错误类来自这里 http://css.dzone.com/news/css-message-boxes-different-me

我在 div 中添加了 display: inline，这样它就不会占据整行。但是，现在它不会进入下一行，而是停留在同一行，并绘制在链接或登录表单的顶部。我如何正确处理这个？我不知道我是否应该添加 <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%; 表示包含元素宽度的一半)。