动态按钮文本的按钮宽度

Question

我想要这样的东西

button1 button2

但问题是我无法为按钮中的文本设置固定宽度，因为它可能是动态的。在我的情况下，内联块不起作用吗？

http://jsfiddle.net/sV8LH/

<p><span class="btn">Reveal Identity</span><span class="btn">View similar candidates</span></p>

Answer 1

您也可以使用

display: inline;而不是

display: inline-block;

示例：http://jsfiddle.net/sV8LH/6/

Answer 2

你可以向左浮动它们，这将设置自动宽度。

<p>
<span class="btn">Reveal Identity</span>
<span class="btn">View similar candidates</span>
<br clear="all" />
</p>

.btn {
    float: left;
    margin-right: 10px;
}

http://jsfiddle.net/sV8LH/2/

Answer 3

有两种方法可以做到这一点

float:left和display:inline

通过将span元素拉到一边（float:left）

，这将使span元素彼此相邻

只是抬头：添加margin:value in px以创建具有元素间空间的按钮，以获得更好的样式。