Question

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

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

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>的自动宽度。非常感谢所有帮助！

Answer 1

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                background:#ededed;
                margin:0 auto;
            }
            .container{
                width:720px;
                border:1px solid red;
                padding:5px;
            }
            .menu-list {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            .menu-list li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="container">
                <ul class="menu-list">
                    <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>

Answer 2

您只需要进行一些更改。

从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;
}

Answer 3

尝试一下。

export const actions = {
  loadAPIData({ commit }) {
    Axios.get(
      "apiUrl.com" +
        this.router.push({
          city: this.router.params.city,
          company: this.router.params.company,
          dealSlug: this.router.params.dealSlug
        }) +
        "/" +
        this.router.params.company +
        "/" +
        this.router.params.dealSlug +
        "/"
    )
      .then(r => r.data)
      .then(dealDetails => {
        commit("SET_API_DATA", dealDetails);
      });
  }
};

export const mutations = {
  SET_API_DATA(state, dealDetails) {
    state.dealDetails = dealDetails;
    for (
      let persons = 2;
      persons <= state.dealDetails.max_vouchers_per_person;
      persons++
    ) {
      state.amountOfPeopleArr.push({
        value: persons,
        text: persons + " personen"
      });
    }
  }
};

HTML CSS ul li auto width

3 个答案: