html - 如何将这些按钮排成一行?

标签 html css button alignment vertical-alignment

<分区>

https://jsfiddle.net/2L9mznzu/

有两个空文本按钮,如何将它们排成一行?

.button {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}
<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>

最佳答案

vertical-align: top 属性用于您的 .button

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. Source: MDN

请看下面的演示:

.button {
  display: inline-block;
  vertical-align: top;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}
<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>

关于html - 如何将这些按钮排成一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41375341/

相关文章:

javascript - 尝试创建一个简单的文本到 ascii 转换器

javascript - jquery不适用于多个但同一个类

javascript - 如何通过 jQuery 引用扩展的 Highslide 对象

javascript - 如果页面上不存在 div,JQuery ui 选项卡会删除/隐藏 <ul> 中的 <li>

html - 谁能告诉我为这个按钮制作一个合适的动画? (如按压)

css - Firefox 的规模和硬件加速过渡问题

html - 跨浏览器 HTML5 视频兼容性不适用于多种视频格式

javascript - jQuery 花式切换不工作

ios - 更改标题 View iOS

javascript - 根据用户输入答案是真还是假将段落输出到网页