如何调整标签 HTML/CSS 之间的间距?

Question

我想自动调整标签之间的文本间距。

">

1. 标签"位于"按钮"下。

这是代码：

<style>
.btn{
margin-right: 5px;
display: inline-block;
text-align: center;
position:relative;
}
.btn label {
display: block;
position:relative;
}
</style>

<!-- Html Part - All show horizontically -->
<button class="btn">Medicine 1</button>
<button class="btn">Medicine 2</button>
<button class="btn">Medicine 3</button>
<button class="btn">Medicine 4</button>
<br>
<!-- here I want to adjust position button relative -->
<!-- I want position/gap of labels adjust automatically under the buttons  -->
<!-- Labels under the buttons looks good and aligned-->

<label class="btn">2 mg</label>
<label class="btn">500 mg</label>
<label class="btn">650 mg</label>
<label class="btn">250 mg</label>

https://jsfiddle.net/

欢迎任何想法或建议。

Answer 1

将margin-bottom: 15px添加到代码中的.btn labelcss。也保留代码的其余部分，因为标签实际上是一个内联元素，所以你必须覆盖它以display: block这样它才能像块元素一样工作，只有这样边距才会对它起作用。