HTML - <form>标记添加换行符

Question

好吧,所以我把它放在<li>右边......就像这样:

这是:

<div id="right_menu">
<ul>
<li class="search-li"><input placeholder="Search things here..." type="text" class="search-tr" /></li>
</ul>
</div>

这是CSS:

#right_menu {
    float:right;
    background: #575757;
}
#right_menu ul li a {
    border-left:1px solid #fff;
    border-right:0px !important;
}

本search-li类和search-tr有没有风格.搜索菜单被包围#first_menu,CSS是:

#first_menu {
    background: #333 !important;
    width:100%;
    border-top:1px solid #fff;
}
#first_menu ul{
    margin: 0;
    padding: 0;
    background: #333;
    float: left;
    }

无论如何,当我添加<form action="search.php" method="get"> ... </form>周围的<input>盒子里<li>......我得到这样的:

我该如何解决？

谢谢

编辑:第二个想法,甚至不确定添加表单和按Enter甚至可以工作...

Answer 1

FORM是块元素,因此它们添加了换行符.重置表单的CSS,所以它没有.

使用:

form {
   display:inline;
   margin:0;
   padding:0;
}

使用!important是一个知道CSS特异性如何工作的标志.阅读这篇文章很好.

此外,最好从CSS重置开始,这将完全阻止此表单布局问题.