6

我四处寻找这个问题的答案，但没有运气！

这就是我想要实现的目标：

在此处输入图像描述

我想要的是选项卡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>' 的自动宽度。非常感谢所有帮助！

4

2 回答 2

0

您只需要进行一些更改。

  • float: left从中删除#tabs>ul>li
  • 移除侧边距，#tabs>ul这样 ul 就可以占据全宽。

更新你的css后应该是这样的。

#tabs {
  height: 30px;
}

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

#tabs>ul>li {
  margin: 0 0px 0 0;
  padding: 7px 10px;
  display: block;
  display: table-cell;
  width: auto;
  background: #C9C9C9;
  text-align: center;
}
于 2019-10-31T12:45:53.223 回答
-2 

body{
      background:#ededed;
      margin:0 auto;
  }
  .container{
      width:720px;
      border:1px solid red;
      padding:5px;
  }
ul{
    list-style:none;
    white-space: nowrap;
}
ul > li{
    display: inline-block;
}
    <!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <body>
           <div class="container">
              <ul>
                  <li><a href="#">menu 1</a></li>
                  <li><a href="#">menu 2</a></li>
                  <li><a href="#">menu 3</a></li>
                  <li><a href="#">menu 4</a></li>
                  <li><a href="#">menu 5</a></li>
              </ul>
           </div>
        </body>
    </html>

于 2017-04-10T04:22:12.160 回答