0

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

4

4 回答 4

3

你clear:both在那里有一个声明，它有效地使你的float:left;. 此外，您的包含 div 的尺寸很小，只有 125 像素，这可能太小而无法容纳您的浮动。您可以让容器自动调整大小，并在进入图形设计阶段后限制大小。

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

于 2013-03-04T14:29:36.740 回答
3

约扎！调试的第一条规则：简化你的条件。你有大量的 CSS 打包到那个小提琴中，这使得任何人都很难将你的问题归零。

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

.pin .actions {
    width: 125px;
}

这使得容器太窄，每行不能容纳一个以上的按钮。尝试将其更改为 300 像素。（或者，你知道，任何更大的东西。）

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

这种风格意味着在按钮的右侧或左侧都不允许浮动项目。

改变这两个，你应该有你想要的。

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

于 2013-03-04T14:30:34.150 回答
0 
<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>
于 2013-03-04T14:32:31.307 回答
0

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

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

当我想对齐div或span水平对齐时，我会使用这个技巧

于 2013-03-04T15:06:59.053 回答