1

Currently I have a list of elements of varying content sizes like so:

<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>

I want the li elements to all have the same width, and that width to be determined by the one that has the longest content. I've seen that I can use display: inline-block; to adjust the li element's width based on it's content, but I don't want them all to have different widths, but instead for each of them to share the width of the one that has largest content. How can I do this using html5, css, and/or bootstrap?

Ivan
  • 1,265
  • 11
  • 20
  • and by "size" you mean width or height? – Dekel Nov 07 '16 at 19:43
  • By size I mean width, I'll edit that – Ivan Nov 07 '16 at 19:45
  • without the css it's impossible to know what you have so far and what affect your html structue. Add a jsfiddle/codepen/snippet that demonstrates the problem. – Dekel Nov 07 '16 at 19:46
  • Ok, I'll make one and edit the question again. – Ivan Nov 07 '16 at 19:49
  • I already figured out the problem, the problem was that my bootstrap grid was 5 columns wide and that didn't allow the elements to increase their width past that, so I increased the height of each element and settled for the information being displayed in 2 consecutive lines. – Ivan Nov 07 '16 at 21:28
  • This is why I said that without the css it's impossible to know... next time create a jsfiddle that show exactly your problem and it will be much easier to help. – Dekel Nov 07 '16 at 21:30
  • Sadly I couldn't show the code through the use of jsfiddle or codepen because, they apparently omit bootstrap code. – Ivan Nov 07 '16 at 21:30
  • There is no problem as all to use bootstrap in jsfiddle & codepen – Dekel Nov 07 '16 at 21:31
  • Then it must have been something else, thanks for the help anyways guys :-) – Ivan Nov 07 '16 at 21:32
  • Does this answer your question? [Every item to have the same width as the widest element](https://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element) – leonheess Aug 16 '21 at 18:57

3 Answers3

2

inline-block is a good start, but for 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 !

table can do if you want to keep the block behavior.

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 does too :

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 !
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

With flexbox you can achieve that. display: inline-flex; work as display: inline-block, size's itself based on content. The flex: 1 on the flex item make them all fill the remaining space and will therefore be come equal width

.list-group {
  display: inline-flex;
  flex-direction: column;
}
.list-group-item {
  flex: 1;
  border: 1px solid 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>
Asons
  • 84,923
  • 12
  • 110
  • 165
1

In the end of 2018, I found and used a cool feature:

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

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

Please try.

Alan Dong
  • 3,981
  • 38
  • 35