菜單格式化HTML

我正在嘗試爲我的網站創建一個菜單欄。這就是我所在的地方。 enter image description here 菜單格式化HTML

我想讓快速搜索文本框移動到菜單欄的右側。這是我的菜單欄的代碼。

<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; 
}

如何擺脫菜單欄上方的白色條紋，以及如何將快速搜索框移到右側？由於

來源

2014-06-09 Nguyen Tran

它已經在右邊.... – APAD1

給所有的一切''li'浮動：除了最後一個孩子left' :)給'浮動：right'持續一個:) –

更好的標記是晶塊從菜單中插入新的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*/ 
}

來源

2014-06-09 17:55:29

移動到右：

#quickquote { 
float: right; 
}

除去白色條紋：

body { 
margin: 0; 
padding: 0; 
}

來源

2014-06-09 17:28:42 almo

添加下面的附加風格 -

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

來源

2014-06-09 17:34:42

菜單格式化HTML

回答

相關問題