float，forms，and UL

我有以下簡單的html + css代碼。出於某種原因，第二個LI項目顯示爲居中。我讚賞你是否可以測試並讓我知道。（我的職位主要是代碼，因爲它是一個非常簡單的HTML網頁，其中已經具備了這個問題）float，forms，and UL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"> 
<title>Float</title> 
<style> 

.el_edit { 
background-image: url(http://www.w3schools.com/images/compatible_safari.gif); 
    background-repeat: no-repeat; 
background-color: transparent; 
    border:   none; 
    height:   50px; 
    width:   50px; 
    vertical-align:top; 
} 
.el_delete { 
background-image: url(http://www.w3schools.com/images/compatible_firefox.gif); 
    background-repeat: no-repeat; 
background-color: transparent; 
    border:   none; 
    height:   50px; 
    width:   50px; 
vertical-align:top; 
} 
</style></head> 
<body> 
<ul><li> 
<div style="float:left;"> 
<form> 
<button class="el_a">A</button> 
</form> </div> 
<div style="float:right;"> 
<div style="float:left;"> 
<form> 
<button class="el_edit">B</button> 
</form> </div> 
<div style="float:right;"> 
<form> 
<button class="el_delete">C</button> 
</form></div> 
</div><br> 
</li> 
<li> 
<div style="float:left;"> 
<form> 
<button class="el_a">A1</button> 
</form> 
</div> 
<div style="float:right;"> 
<div style="float:left;"> 
<form> 
<button class="el_edit">B1</button> 
</form> </div> 
<div style="float:right;"> 
<form> 
<button class="el_delete">C1</button> 
</form></div> 
</div> 
</li> 
</ul> 
</body> 
</html>

see how second LI item is kind of centered inside-block block table-row

來源

2013-10-12 mario

見你在星期一。 ps我使用Firefox 17.0.1 – mario

你需要什麼輸出？你可以上傳屏幕截圖 –

第二行應該在第一行的下方，即 – mario

我希望這個CSS可以解決您的問題

li{display:block}

來源

2013-10-12 19:17:35

nope，我得到第三個img。 – mario

你想要第二張圖片？ @mario –

不，我希望第二行恰好位於最後一行的下方，即第二行項目點應該位於第一行項目點的下方，對於其他元素也是如此。 – mario

只是試着跟隨小提琴來檢查你想要什麼....

<form name="el"> 
<button class="el_a">A</button> 
</form>

http://jsfiddle.net/WdeAF/

來源

2013-10-12 19:33:18 akshaymanerikar

不，我得到第二個img。 – mario

您正在使用哪個瀏覽器...因爲我試圖在Internet Explorer上插入內聯... – akshaymanerikar

@mario只是看看嘗試上面的代碼我編輯了... – akshaymanerikar

float，forms，and UL

回答

相關問題