Why does form affect div spacing?
I am not great with html/css. But why does the first html have Home and form textbox in the same line (as i want) and the second has the textbox (and other boxes and links) on a separate line?
<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"/>
I think it has to do with the div tag at the end of this line:
<form action="/login?ret=%2f" method="post"><div>
Since div is a block element, the input box inside the div will appear on a second line, whereas in the first example, both "Home" and the input box are in the same div, and hence on the same line.
In addition to what Ray suggested:
<div class="login">
<a href="/" title="Home">Home</a>
<form action="/login?ret=%2f" method="post">
<input type="text" name="username"/>
</form>
</div>
you also need to add the following styling: form { display: inline; }
.
Your html is a little mixed up. The 'login' div ends after the opening tag of the form - it needs to wrap the entire form.
<div class="login">
<a href="/" title="Home">Home</a>
<form action="/login?ret=%2f" method="post">
<input type="text" name="username"/>
</form>
<div>
精彩评论