Question

我有一个区域，我想在其中添加两个按钮。在左侧按钮是“星期日”，右侧是“misc”。我想要的是均匀地放置两个按钮。因为两个按钮具有相同的大小，所以我为它们分配了相同的类。代码：

<div id="switcher"> 
 <div class="button" id="Sunday">Sunday</div>
 <div class="button" id="mic">mic</div>

所以我认为周日自然就在左边。我只是想添加一些规则来分隔两个按钮，例如填充左边... 然而结果是“星期日”在右侧。为什么？请在jsfiddle.

查看我的CSS

感谢。

Answer 1

关于您的CSS，position:absolute和.button上的.mic正在严重阻碍。把这两个实例拿出去你会得到或多或少的期望（左边的星期日，右边的麦克风，带有明显左边填充的麦克风等）。

Answer 2

按钮的position设置为absolute。从.button类和ids（#Sunday和#mic）中取出它。

此外，我建议删除按钮的边距和填充并使用display：inline-block而不是inline。您不能在内联元素中指定宽度或高度，并且块元素通常无法在同一水平线上渲染而无需额外的摆弄。

如果您必须将切换器宽度设置为456px，则可以将按钮设置为宽度228px（其中1/2）。按钮div之间的html中的换行符在按钮之间添加了一个空格，所以你应该把第二个div放在第一个div之后。

这是您尝试做的更易于管理的版本。 http://jsfiddle.net/ftQD5/19/

编辑：如果要垂直对齐按钮/文本，可以先将按钮设置为position:relative，然后设置top:<vertical offset>px。这会将按钮向下移动。然后，您可以在按钮上添加padding-top以使文本垂直居中显示。这里可以看到一个更新的例子：http://jsfiddle.net/ftQD5/20/

编辑＃2：在周围div中垂直居中文本的一种简单方法是使line-height等于div高度。这将自动居中文本。它比padding-top更容易使用，因为它不会影响按钮div的高度。最后更新的小提琴：http://jsfiddle.net/ftQD5/26/

Answer 3

这是因为在按钮类上你有一个120左右的边距，但你将mic id的margin-left属性重置为0。

修改更干净的小提琴做你想做的事：http://jsfiddle.net/ftQD5/13/

定位两个按钮

3 个答案: