css - 如何使标签与 CSS 保持一致？

Question

我已经实现了一个 UI。我有4个标签。选项卡之间的间隙不同（不一致），如果我尝试制作widthto auto，则不会显示选项卡下方的指示器。

标签的代码 -

<div class="MuiTabs-flexContainer" role="tablist">
    <button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit Mui-selected" tabindex="0"   type="button" role="tab" aria-selected="true">
        <span class="MuiTab-wrapper">Aikika</span>
        <span class="MuiTouchRipple-root"></span>
    </button>
    <button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit" tabindex="-1" type="button" role="tab" aria-selected="false">
        <span class="MuiTab-wrapper">Qwertyuio</span>
        <span class="MuiTouchRipple-root"></span>
        </button>
    <button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit" tabindex="-1" type="button" role="tab" aria-selected="false">
        <span class="MuiTab-wrapper">Plmojnuhbtf</span>
        <span class="MuiTouchRipple-root"></span>
        </button>
    <button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit" tabindex="-1" type="button" role="tab" aria-selected="false">
        <span class="MuiTab-wrapper">Tokjl Test</span>
        <span class="MuiTouchRipple-root"></span>
    </button>
</div>

和指标代码（标签下方的下划线）-

<span class="jss3 jss5 MuiTabs-indicator jss1" style="left: 0px; width: 120px;"></span>

CSS代码是 -

.MuiTabs-flexContainer button {
    min-width: 120px;
    font-weight: 100;
    margin-top: 8px;
}

指标的 CSS 代码 -

.jss1 {
    height: 3px;
    background-color: #09728e;
}

目前一切正常，但选项卡之间的差距不一致。我希望我的标签保持一致，指示器也应该可以正常工作。我附上了截图供参考。红框显示选项卡和蓝线之间的间隙，显示选项卡下方的指示器。

标签： cssmaterial-ui

Answer 1

你可以尝试做这样的事情：

.MuiTabs-flexContainer{
  display: flex;
  align-items: center;
  justify-content: space-between;
}