gpt4 book ai didi

HTML CSS ul li 自动宽度

转载 作者:太空狗 更新时间:2023-10-29 16:47:23 25 4
gpt4 key购买 nike

<分区>

我四处寻找这个问题的答案,但没有找到答案!

这就是我要实现的目标:

enter image description here

我想要的是标签 ul li根据特定页面上的选项卡数量自动调整宽度。每页上的标签数量会发生变化,但我找不到使标签自动变宽的方法。

代码:

#tabs {
height: 30px;
}

#tabs>ul {
font-size: 1em;
list-style: none;
width: 100%;
display: table;
table-layout: fixed;
}

#tabs>ul>li {
margin: 0 0px 0 0;
padding: 7px 10px;
display: block;
float: left;
display: table-cell;
width: auto;
background: #C9C9C9;
text-align: center;
}
<div id="tabs">
<ul>
<li id="tabHeader_1">Page 1</li>
<li id="tabHeader_2">Page 2</li>
<li id="tabHeader_3">Page 3</li>
<li id="tabHeader_4">Page 4</li>
<li id="tabHeader_5">Page 5</li>
</ul>
</div>
<div class="tab-content" id="tab_1">
<h2>Page 1</h2>
<p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_2">
<h2>Page 2</h2>
<p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_3">
<h2>Page 3</h2>
<p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_4">
<h2>Page 3</h2>
<p>Pellentesque habitant morbi tristique senectus...</p>
</div>
<div class="tabpage" id="tab_5">
<h2>Page 3</h2>
<p>Pellentesque habitant morbi tristique senectus...</p>
</div>

所有的尝试都没有成功 <li>的自动宽度。非常感谢所有帮助!

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