gpt4 book ai didi

javascript - 如何对齐选项卡 - materialize.js?

转载 作者:行者123 更新时间:2023-11-28 02:09:49 27 4
gpt4 key购买 nike

我正在使用 materialize.js 生成某种 Tabbar slider ,就像您在下面的示例中看到的那样:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<ul style="position: fixed; top: 15%; height: 20%" class="tabs">
<li class="tab">
<a href="#a">LONG TEXT 123456789012345</a>
</li>
<li class="tab">
<a class="active" href="#b">SHOULD BE CENTERED</a>
</li>
<li class="tab">
<a href="#c">...</a>
</li>
</ul>

<div id="a" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 1 </div>
<div id="b" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 2 </div>
<div id="c" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 3 </div>


但是我在水平居中 second Tab 中遇到了很大的麻烦,这个标签叫做“SHOULD BE CENTERED”。我不知道如何将此 TAB 精确移动到屏幕中间,因为添加了属性:

vertical-align: center

text-align: center

似乎根本不起作用。

编辑:img所以我希望任何人都能够帮助我。提前一百万谢谢,简

最佳答案

一如既往:Flex 是我们的主宰和救世主:)

让你的 ul{ display : flex } 然后给每个 child 三分之一的宽度 li {flex-basis : 33.33% }

ul.tabs {
display : flex;
}

li.tab {
flex-basis : 33.33%;
border : blue dashed 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<ul style="position: fixed; top: 15%; height: 20%" class="tabs">
<li class="tab">
<a href="#a">LONG TEXT 123456789012345</a>
</li>
<li class="tab">
<a class="active" href="#b">SHOULD BE CENTERED</a>
</li>
<li class="tab">
<a href="#c">...</a>
</li>
</ul>

<div id="a" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 1 </div>
<div id="b" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 2 </div>
<div id="c" style="position: fixed; top: 35%; width: 100%; height: 100%"> Test 3 </div>

关于javascript - 如何对齐选项卡 - materialize.js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48824492/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com