logo标签列表

HTML CSS ul li 自适应宽度

htmlcss
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
将 #tabs > ul > li 的 CSS 规则中的 float: left; 移除。 - Yograj Gupta
2个回答
0

你只需要做一些修改。

  • 从#tabs>ul>li中删除float: left
  • 从#tabs>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;
}
-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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接