html - 如何在html中调整标签大小

Question

我正在尝试调整 HTML 中标签的大小。我需要将选项卡的大小调整为按钮的大小。

#economic_data_layout_tab {
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f1f1f1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    color: #333333;
    tab-size: 4;
}

<div class="tab" id="economic_data_layout_tab">
     <button class="tablinks" onclick="showPreviousYearLayout()">Previous year</button>
     <button class="tablinks" onclick="showActualYearLayout()">Actual year</button>
</div>

有什么建议吗？ 感谢阅读。

Answer 1

默认情况下，div 标签具有display: block 样式，这意味着它将占据父元素的整个宽度。由于您希望它根据其内容采用宽度，只需将 CSS 覆盖为 display: inline-block。

或者，如果需要，您也可以使用 float:left。

解决方案 1:使用内联显示

#economic_data_layout_tab {
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f1f1f1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    color: #333333;
    tab-size: 4;
    display: inline-block;
}

<div class="tab" id="economic_data_layout_tab">
     <button class="tablinks" onclick="showPreviousYearLayout()">Previous year</button>
     <button class="tablinks" onclick="showActualYearLayout()">Actual year</button>
</div>

方案二:使用 float

#economic_data_layout_tab {
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f1f1f1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    color: #333333;
    tab-size: 4;
    float: left;
}

<div class="tab" id="economic_data_layout_tab">
     <button class="tablinks" onclick="showPreviousYearLayout()">Previous year</button>
     <button class="tablinks" onclick="showActualYearLayout()">Actual year</button>
</div>