[英]Css floating li but not ul
嗨,我嘗試浮動我的li,但不浮動我的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謝謝
但是從語義上來說,您使用了錯誤的html元素
ul是無序列表,將其替換為div
p是一個段落,將其替換為一個跨度
li是商品清單
正確構造html會讓您更輕松。 看看了解結構良好的html是多么容易, http://fiddle.jshell.net/4TzZv/16/
獅子座
也許是這樣嗎?
form ul li {
float: left;
line-height: 24px;
list-style: none;
}
form ul {
clear: both;
}
您也可以用這種方式
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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.