1

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

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

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

谢谢。

4

3 回答 3

1

关于你的 CSS，position:absoluteon.button并且.mic把事情搞砸了。去掉这两个实例，你或多或少会得到你所期望的（左边是星期天，右边是麦克风，带有明显左侧填充的麦克风等）。

于 2012-08-01T02:57:38.517 回答
1

按钮已position设置为absolute。将其从 .button 类和 ID（#Sunday 和 #mic）中删除。

此外，我建议去掉按钮的边距和填充，并使用 display:inline-block 而不是 inline。您不能在内联元素中指定宽度或高度，并且块元素通常不能在没有额外摆弄的情况下呈现在同一水平线上。

如果您绝对必须将切换器宽度设置为 456 像素，那么您可以将按钮设置为宽度 228 像素（其中的 1/2）。html 中按钮 div 之间的换行符在按钮之间添加了一个空格，因此您应该将第二个 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/

于 2012-08-01T03:11:59.517 回答
0

这是因为在按钮类上，您的 margin-left 为 120，但您将 mic id 的 margin-left 属性重置为 0。

编辑 清洁器小提琴做你想做的事：http: //jsfiddle.net/ftQD5/13/

于 2012-08-01T02:58:56.173 回答