用CSS水平显示div

我是新来的网页设计，我尝试用几种方法将我的按钮<div> s水平放置在一个<div>中。我尝试使用display:inline-block和float:left，但都没有工作。请有人可以告诉我什么是错误there：用CSS水平显示div

来源

2013-03-04 Hued Bafuli

http://jsfiddle.net/wZf4C/1/ – 2013-03-04 14:23:58

请发表您的问题代码，以及的jsfiddle链接是：http：/ /meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle – Lowkase 2013-03-04 14:24:51

我需要的是把第一个3按钮（回音，像，评论）horizobtally和第二个3按钮相同方式是水平的 – 2013-03-04 14:25:09

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

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

.pin .actions { 
    width: 125px; 
}

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

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

这种风格意味着没有浮动元素被允许要么向右或按钮的左侧。

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

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

来源

2013-03-04 14:30:34 Nate

谢谢，它的工作。非常感谢 – 2013-03-04 14:34:14

我很高兴它的工作！你应该继续并接受答案。我建议接受Eamon Nerbonne's，因为我们的答案是一样的，而Eamon是第一个。 – Nate 2013-03-04 14:44:30

你有一个clear:both声明在那里有效地废除你的float:left;。另外，你的div包含一个125px的小尺寸，这对你的浮动物来说可能太小了。您可以让容器自动调整大小，并在进入图形设计阶段后再限制大小。

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

来源

2013-03-04 14:29:36

谢谢，它的工作。非常感谢 – 2013-03-04 14:33:12

<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-04 14:32:31

我认为，一个简单的CSS代码行解决您的问题。

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

时，我想我对齐用这一招div或span水平

来源

2013-03-04 15:06:59 jameson

用CSS水平显示div

回答

相关问题