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

但从语义上讲，你使用的是错误的html元素

ul是无序列表，将其替换为div

p是段落用span

替换它

li是一个项目列表

正确构建html会让事情变得更轻松。看看理解结构良好的HTML是多么容易 http://fiddle.jshell.net/4TzZv/16/

利奥

Answer 2

也许是这样的？

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

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

form ul {
    clear: both;
}

Answer 3

你也可以这样做

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
}

Answer 4

您可以参考此链接，其中包含使列表水平的步骤 Horizontal lists - all steps combined