如何用CSS而不是表格來格式化？

ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
overflow:hidden; 
} 

li 
{ 
float:left; 
padding-right:5px; 
color:#333333; 
font-size:13px; 
font-family:arial,sans-serif; 
align:center; 
} 

<ul> 
<form action="login.php" method="post"> 
<li><input name="search" type="text" /></li> 
<li><input value="Search" type="submit" /></li> 
<li><a href="register.html">Register</a></li> 
<li><a href="login.html">Login</a></li> 
</form> 
</ul>

我有這段代碼創建一個帶搜索框，搜索按鈕，註冊鏈接和登錄鏈接的水平欄。不過，我希望將所有內容都集中在一起，就像YouTube的單槓一樣。目前他們的Y位置從屏幕的頂部開始，看起來很糟糕。如果我使用的是HTML表格，我只是將每個td放在表格中，但我試圖用CSS正確編程。如何用CSS而不是表格來格式化？

我是網絡編程和CSS的新手。

PS：YouTube如何在瀏覽和上傳鏈接之間創建那些奇特的分隔線？我查看了源代碼並沒有發現任何東西。 =（

來源

2011-02-27 John Smith

關於酒吧，他們有他們的鏈接這種風格：

#masthead-utility a { 
    border-left: 1px solid #CCCCCC; 
    padding: 0.1em 0.8em; 
    white-space: nowrap; 
}

注意左邊框Firebug是一個偉大的同伴，當談到看到人們如何在其網站上做的事情，尤其是幫助你排隊東西在自己的網站，以其實時編輯。

來源

2011-02-27 01:23:52 Josh

我測試了它的偉大工程，是在大小效率。

<html> 
<body> 

<form action="login.php" method="post"> 
<input name="search" type="text" /> 
<input value="Search" type="submit" /> 
<a href="register.html">Register</a> 
<a href="login.html">Login</a> 
</form> 

</body> 
</html>

來源

2011-02-27 03:53:53

此代碼做同樣的事情塔除了效率更高之外，你還在處理你的清單。 – 2011-02-27 03:57:53

如何用CSS而不是表格來格式化？

回答

相關問題