Html 动态按钮文本的按钮宽度

我想要这样的东西

按钮1按钮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;
}

透露身份
查看相似的候选人



.btn{
浮动：左；
右边距：10px；
}

您也可以使用

显示：内联而不是

display: inline-block;

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

float:left
和
display:inline

这将通过将跨距元素拉到一侧（浮动：左

）使跨距元素彼此相邻对齐

---

只是一个提示：在px中添加一个

margin:value

来创建具有元素间空间的按钮，以更好地设计样式。

浮动，宽度将自动调整？这是我第一次知道这一点！只要你没有特别声明（看小提琴..我删除了

width:100%

当使用

inline block

时，你可以完全关闭

float

这个选项，但是float left和inline block有什么区别呢？在我的例子中，它们似乎做了同样的事情，这是一个描述inline block属性的好答案。inline意味着它与documen一起显示t flow（如

）。块表示它占据整个宽度，并在其后出现一个换行符（如

）。当您浮动元素时，它位于文档流之外，其余内容围绕它流动。内联块不会；文档继续正常流动。

display: inline-block;