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>

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

标签： htmlcsstabs

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>

解决方案 2：使用浮动

#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>