Question

我是网页设计的新手，我尝试了几种方法将我的按钮<div>水平放在一个<div>中。我尝试使用display:inline-block和float:left，但都没有效果。请有人告诉我错误是什么there：

Answer 1

你的clear:both声明中有float:left;声明有效地使{{1}}无效。此外，您的包含div有一个125px的小尺寸，这可能太小，您的浮动适合。您可以让容器自动调整大小，并在进入图形设计阶段后稍后限制大小。

此外，你有很多不必要的，可能是错误的标记。在投入大量时间和金钱进行维护之前，您应该考虑进行系统的重写。您可能会以更简单，更不容易出错的方式获得相同的布局。

Answer 2

Yowza！调试的第一条规则：简化您的条件。你有大量的CSS包装在那个小提琴中，这使得任何人都很难解决你的问题。

你有两件事阻止你的按钮水平出现在同一条线上。

.pin .actions {
    width: 125px;
}

这使得容器太窄而不能容纳每行多于一个按钮。尝试将其更改为300px。（或者，你知道，更大的东西。）

.actions .WhiteButton.Button11 {
    clear: both;
}

此样式表示按钮的右侧或左侧不允许浮动项目。

更改这两者，你应该拥有你想要的东西。

http://jsfiddle.net/nate/wZf4C/2/

Answer 3

<style>
.grid{
    width:200px;
    height:200px;
    background-color:#666666;
    float:left;
    margin:5px;
}
</style>

<div class="grid">Div 1</div>
<div class="grid">Div 2</div>
<div class="grid">Div 3</div>

Answer 4

我认为简单的css代码行可以解决您的问题。

maring-left:auto;
margin-right:auto;

当我想水平对齐div或span

时，我会使用此技巧

用css水平显示div

4 个答案: