物化选项卡指示器始终溢出

Question

我正在使用Materializecss框架的tab元素，并且试图制作一个简单的3 tab滑块。

由于某种原因，每当我添加第三个标签时，底部的标签指示符总是向右溢出，从而出现滚动条：

我的代码很简单：

<div class="col s12" id="charging_history_tabs">
    <ul class="tabs">
        <li class="tab col s4">
            <a href="#charging_history_chart_tab">Line Chart</a>
        </li>
        <li class="tab col s4">
            <a href="#charging_history_sankey_tab">Sankey Diagram</a>
        </li>
        <li class="tab col s4">
            <a href="#download_tab">Download Session Data</a>
        </li>
    </ul>
</div>

<div class="row" id="charging_history_chart_tab">
    <div class="col s12">
        <canvas id="charging_history_chart" width="400" height="200"></canvas>
    </div>
</div>

<div class="row" id="charging_history_sankey_tab">
    <div class="col s12">
        <div id="sankey_basic" style="width: 800px; height: 500px;"></div>
    </div>
</div>

<div class="row" id="download_tab">
    <h1> hello there!</h1>
</div>

有人可以告诉我我在做什么错吗？

Answer 1

出现滚动条，因为没有足够的空间。如果您更改容器或容器中元素的宽度，应该可以解决问题。

Answer 2

您没有使用class="row"将制表符代码包含在div中，因此col的呈现方式不正确...

尝试这样：

<div class="row">
      <div class="col s12" id="charging_history_tabs">
          <ul class="tabs">
              <li class="tab col s4">
                  <a href="#charging_history_chart_tab">Line Chart</a>
              </li>
              <li class="tab col s4">
                  <a href="#charging_history_sankey_tab">Sankey Diagram</a>
              </li>
              <li class="tab col s4">
                  <a href="#download_tab">Download Session Data</a>
              </li>
         </ul>
     </div>
</div>