CSS標籤定位

Question

我想使用一個無序列表來模擬CSS標籤，但我創建莫名其妙的那些延伸到他們下面的表單（這當然是無意的）

我通過浮動鏈接創建的標籤左邊。這是我想要的，

但不幸的是，這是得到什麼。請注意標籤如何替換表單的「輸入」元素。到底是怎麼回事？

這是我的標記和CSS

<link rel='stylesheet' type='text/css' href='style.css'> 
<div id='page'> 
    <ul class='tabs'> 
     <li><a href='www.google.co.ug'>google search</a></li> 
     <li><a href='showall.php'>show all names</a></li> 
     <li><a href='logout.php'>logout</a></li> 
    </ul> 
    <form action='storedata.php' method='post'> 
      <div class='simpledata'> 
       <label for='fname'>first name</label> 
       <input class='kyetagisa' type='text' name='fname' size='20'> 
      </div> 
     //more elements added here 

    <input type='submit'> 
    </form> 
</div> 

而這裏的style.css

label 
{ 
    text-align:right; 
    width:150px; 
    float:left; 
    clear:both; 
    margin-right:5px; 
} 

div.simpledata 
{ 
    margin-top:5px; 
} 

ul 
{ 
    list-style:none; 
} 

ul.tabs a 
{ 
    float:left; 
    margin-right:10px; 
    color:white; 
    text-decoration:none; 
    background-color:#00e; 
} 

#page 
{ 
    background-color:#eee; 
    margin-left:130px;margin-right:130px; 
    height:180px; 
} 

Answer 1

你可以使用：

form { 
    clear: both; 
} 

要強制form（及其子元素）出現在ul以下。

JS Fiddle。

Answer 2

您需要在您的ul後添加一個清算div或br。

Answer 3

我剛剛從標籤css塊中刪除了float：left。

http://jsfiddle.net/tTrAa/

Answer 4

設置列表中，以「隱藏」的「溢出」的場所也應該工作。

ul 
{ 
    list-style:none; 
    overflow:hidden; 
}