的CSS浮利，但不符合UL

Question

您好我嘗試浮動我的李，但不是我的UL

<form name="contactform" action="send_email.php" method="post"> 

     <ul> 
     <li><p>Email : </p> </li> 
     <li><input type="text" class="entry" name="email" size="30" id="input_email"> </li> 
     <li><span id=icon_email></span></li> 
     </ul> 


     <ul> 
     <li><p>Nom/Prénom/Pseudo : </p></li> 
     <li><input type="text" class="entry" name="name" size="30" id="input_name"></li> 
     <li><span id=icon_name></span></li> 
     </ul> 


     <ul> 
     <li><p>Message : </p></li> 
     <li><textarea rows="6" cols="50" class="textarea" name="body" id="input_body"></textarea> </li> 
     <li><span id=icon_body></span></li> 
     </ul> 


     <input type="submit" value="Envoyer un email" class="button pure_bleu" id="button_send_email"> 

    </form> 

所以在我的CSS我有：

form ul li { 
    float: left; 
} 

所以，結果是這樣的：

所以我想那塊：li是浮動但不是ul 謝謝

Answer 1

也許這樣嗎？

http://jsfiddle.net/JVNPN/3/

form ul li { 
    float: left; 
    line-height: 24px; 
    list-style: none; 
} 

form ul { 
    clear: both; 
} 

Answer 2

但是從語義你使用了錯誤的html元素

UL是一個無序列表，用一個div取代它

p是一個段落，跨度

裏取代它的項目列表

正確地構造你的html會讓你更容易。看看它是多麼容易理解一個結構良好的HTML http://fiddle.jshell.net/4TzZv/16/

利奧

Answer 3

你可以參考這個鏈接，有步驟，以使列表水平 Horizontal lists - all steps combined

Answer 4

你能做到這樣也

http://jsfiddle.net/anjum121/JVNPN/1/

form ul li { 
display:inline-block; 
line-height: 24px; 
vertical-align: middle; 
list-style: none;} 

form ul{ 
display:block 
}