【发布时间】：2020-10-18 19:04:34
【问题描述】：
我想自动调整标签之间的标签文本间距。
- “标签”位于“按钮”下方。
代码如下：
<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>
欢迎任何想法或建议。
【问题讨论】：
-
你是不是链接到了jsfiddle的index page？？
-
您是否考虑过为此使用表格？
-
@ruud 如何在表格中实现这一点？
-
我看到奥萨马已经尝试解释过了。简而言之，您制作了一个表格，其中您将按钮 1 放在第一列、第一行、标签 2 放在第一列、第二行、按钮 2 放在第二列的第一行，等等。哪个保证按钮和标签将对齐。也许这是阅读有关表格的 html 教程并进行试验的一个很好的起点。
标签： html css html5-canvas