Question

我正在尝试获取以下水平列表以均匀填充空间..

<ul class="tabs-menu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li><a class="w3-bar-item w3-button" onclick="openCity('tab1')">tab1</a></li>
<li><a class="w3-bar-item w3-button" onclick="openCity('tab2')">tab2</a></li>< 
<li><a class="w3-bar-item w3-button" onclick="openCity('tab3')">tab3</a></li>
<li><a class="w3-bar-item w3-button" onclick="openCity('tab4')">tab4</a></li>                   
</ul>

.tabs-menu{text-align:justify;width:100%;background:grey;}
.tabs-menu:after{content:'';display:inline-block;width:100%;}
.tabs-menu li{display:inline-block;padding:10px;border-right:2px solid white;}
.tabs-menu a{color:white;}

我哪里错了？

Answer 1

CSS3 Flexbox将使用display:flex中的ul和flex:1中的li来执行此操作，该广告素位于flex:1，这是flex-grow的简写} / flex-shrink / flex-basis，如此长久的是flex:1 0 auto。 flex-grow:1意味着它会与兄弟姐妹一起成长。

<强>更新

Op的评论后

jsfiddle.net/9hh86/547这可以用flexbox来完成吗？

您可以在justify-content:space-between

中使用ul

body {
  margin: 0
}

.tabs-menu {
     width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content:space-between;
  background: grey;
  text-align: center;
}

.tabs-menu li {
  padding:10px;
  border: solid white;
  border-width: 0 2px;
}

.tabs-menu a {
  color: white;
}

<ul class="tabs-menu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab1')">tab1</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab2')">tab2</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab3')">tab3</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab4')">tab4</a></li>
</ul>

Answer 2

我会在父级上使用flex，并将子级设置为flex-grow: 1; flex-basis: 0，以便他们根据父级的宽度均匀填充父级，而不是li中的内容。同时添加text-align: center;并从ul

中删除填充

.tabs-menu {
  text-align: justify;
  background: grey;
  display: flex;
  padding: 0;
}

.tabs-menu li {
  flex: 1 0 0;
  padding: 10px;
  border-right: 2px solid white;
  list-style: none;
  text-align: center;
}

.tabs-menu a {
  color: white;
}

<ul class="tabs-menu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab1')">tab1</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab2')">tab2</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab3')">tab3</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab4')">tab4</a></li>
</ul>

Answer 3

处理此问题的最佳方法是使用flex：

.tabs-menu {
  display: flex;
  flex-wrap: wrap;
  padding: 0; // Optional, but probably desired
}

.tabs-menu li {
  flex: 1;
}

.tabs-menu {
  text-align: justify;
  width: 100%;
  background: grey;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.tabs-menu:after {
  content: '';
  display: inlinea-block;
  width: 100%;
}

.tabs-menu li {
  display: inline-block;
  padding: 10px;
  border-right: 2px solid white;
  flex: 1;
}

.tabs-menu a {
  color: white;
}

<ul class="tabs-menu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab1')">tab1</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab2')">tab2</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab3')">tab3</a></li>
  <li><a class="w3-bar-item w3-button" onclick="openCity('tab4')">tab4</a></li>
</ul>

我还创建了一个展示这个here的小提琴。

希望这有帮助！：）

水平列表 - 均匀填充空间

3 个答案: