Question

目前我有一个不同内容大小的元素列表，如下所示：

<ul class="list-group ul-right">
    <li class="list-group-item">
        <b> Name</b>         
    </li>
    <li class="list-group-item">
        <b> Longer Name</b>         
    </li>
    <li class="list-group-item">
        <b> Longest Name in the World </b>         
    </li>
<ul>

我希望li元素都具有相同的宽度，并且该宽度由具有最长内容的元素确定。我已经看到我可以使用 display：inline-block ;根据它的内容调整li元素的宽度，但我不希望它们都具有不同的宽度，而是为每个元素分享具有最大宽度的li元素的宽度。内容。我怎么能用html5，css和/或bootstrap呢？

Answer 1

使用flexbox，您可以实现这一目标。 display: inline-flex;工作为display: inline-block，尺寸基于内容。弹性项目上的flex: 1使它们全部填充剩余空间，因此将等于宽度

＆＃13;

.list-group {
  display: inline-flex;
  flex-direction: column;
}
.list-group-item {
  flex: 1;
  border: 1px solid gray;
}

＆＃13;

<ul class="list-group ul-right">
    <li class="list-group-item">
        <b> Name</b>         
    </li>
    <li class="list-group-item">
        <b> Longer Name</b>         
    </li>
    <li class="list-group-item">
        <b> Longest Name in the World </b>         
    </li>
<ul>

＆＃13;

Answer 2

内联块是一个好的开始，但对于ul：

ul {
  display: inline-block;
}
li {
  background: gray;
}

<ul class="list-group ul-right">
  <li class="list-group-item">
    <b> Name</b> 
  </li>
  <li class="list-group-item">
    <b> Longer Name</b> 
  </li>
  <li class="list-group-item">
    <b> Longest Name in the World </b> 
  </li>
  </ul>
    hi !

如果你想保持阻止行为，

表可以做。

ul {
  display: table;
}
li {
  background: gray;
}

<ul class="list-group ul-right">
  <li class="list-group-item">
    <b> Name</b> 
  </li>
  <li class="list-group-item">
    <b> Longer Name</b> 
  </li>
  <li class="list-group-item">
    <b> Longest Name in the World </b> 
  </li>
</ul>
hi !

Float也是如此：

ul {
  float:left;
}
li {
  background: gray;
}

<ul class="list-group ul-right">
  <li class="list-group-item">
    <b> Name</b> 
  </li>
  <li class="list-group-item">
    <b> Longer Name</b> 
  </li>
  <li class="list-group-item">
    <b> Longest Name in the World </b> 
  </li>
</ul>
hi !

Answer 3

在2018年底，我发现并使用了一个很酷的功能：

https://caniuse.com/#search=max-content

ul.list-group {
  width: max-content;
}

请尝试。

将所有li元素的宽度设置为宽度最大的元素

3 个答案: