Question

我有以下简单的html + css代码。由于某种原因，第二个LI项目显示为居中。如果您可以测试并让我知道，我很感激。（我的帖子主要是代码，因为它是一个非常简单的html页面，已经显示了问题）

<!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

Answer 1

我希望这个CSS可以解决你的问题

li{display:block}

Answer 2

试着跟随小提琴检查你想要的东西......

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

http://jsfiddle.net/WdeAF/

浮动，表格和UL

2 个答案: