Question

我对html / css不太满意。但是为什么第一个html在同一行（我想要）中有Home和form文本框，而第二个html在另一行上有文本框（以及其他框和链接）？

<div class="login">
<form action="/login?ret=%2f" method="post"><div>
<a href="/" title="Home">Home</a> 
<input type="text" name="username"/>

<div class="login">
<a href="/" title="Home">Home</a> 
<form action="/login?ret=%2f" method="post"><div>
<input type="text" name="username"/>

Answer 1

我认为这与该行末尾的div标签有关：

<form action="/login?ret=%2f" method="post"><div>

由于div是块元素，div内的输入框将出现在第二行，而在第一个示例中，“Home”和输入框都在同一个div中，因此在同一行上。

Answer 2

除了雷建议：

<div class="login"> 
  <a href="/" title="Home">Home</a>  
  <form action="/login?ret=%2f" method="post">
    <input type="text" name="username"/>
  </form>
</div>

您还需要添加以下样式：form { display: inline; }。

Answer 3

你的HTML有点混乱。 'login'div在表单的开始标记之后结束 - 它需要包装整个表单。

<div class="login"> 
  <a href="/" title="Home">Home</a>  
  <form action="/login?ret=%2f" method="post">
    <input type="text" name="username"/>
  </form>
<div>

为什么表单会影响div间距？

3 个答案: