HTML - <form>标记添加换行符</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>时...我明白了：

我该如何解决这个问题？

由于

编辑：第二个想法，甚至不确定添加表单和按回车甚至可以工作......

Answer 1

FORM是块元素，因此它们添加换行符。重置表单的CSS，使其不重复。

使用：

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

使用!important是一个了解CSS特异性如何工作的标志。这对read up on this很好。

此外，最好从CSS reset开始，这将完全阻止此表单布局问题。