菜单格式化HTML

Question

我正在尝试为我的网站创建一个菜单栏。这就是我所处的位置。

我想让快速搜索文本框移动到菜单栏的右侧。这是我的菜单栏代码。

<div id="menu">

    <ul>
    <li><a href="default.php">Home</a></li>
    <li><a href="search.php">Quote</a></li>
    <li><a href="history.php">History</a></li>
    <li><a href="lookup.php">Lookup</a></li>
    <li><form id="quickquote" method="get"> <input type="text" size="15" name="symbol" />
        <input type="submit" value="Quote" onClick="quickquote.action='search_get.php';"/> </form> </li>

    </ul>
    </div>

我也想知道为什么我的菜单栏上面有一个白色条带，即使我将边距设置为0px。这是我的样式表。

ul
{
position:relative;
list-style-type:none;
background-color:#31A8FF;
overflow:hidden;
margin:0px;
}

li 
{
float:left;
font-size:12pt;
text-align:center;
margin:5px;
}

如何摆脱菜单栏上方的白条，如何将快速搜索框移到右侧？感谢

Answer 1

向右移动：

#quickquote {
float: right;
}

删除白色条纹：

body {
margin: 0;
padding: 0;
}

Answer 2

添加以下附加样式 -

ul{float:left;width:100%}
ul li:last-child{float:right;}

Answer 3

更好的标记是从菜单中新建DIV中的表单块插入。

但是为了这个标记：

ul#menu{
margin: 0;
padding: 0;
}
ul#menu li{
margin: 0;
padding: 0;
float: left; /*LTR*/
list-style: none;
}
ul#menu li:last-child{
margin: left: 30px;  /*LTR -- Your margin*/
}
input[type="text"]{
float: left; /*LTR*/
}
input[type="submit"]{
float: right; /*LTR*/
margin-right: 10px; /*LTR*/
}