Show blank space in li tag

user_7648790 0
Viewed 601

I have below HTML code

ul {
    margin: 0;
    padding: 0;
    display: flex;
}

ul li {
    list-style: none;
    color: #484848;
    font-size: 80px;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li> </li>
  <li>E</li>
</ul>

I am expecting results like below

ABC E

but instead, I am getting like

ABCE

I cannot use &nbsp; as in my work I am iterating an array which might be something like below

array = ['A', 'B', 'C', ' ', 'E'];

Could someone please suggest how to get the whitespace for blank value?

here is the code pen https://codepen.io/gs650x/pen/mdmWOMJ

css html
4 Answers

You can set min-width: 1ch where 1ch means width of 1 character.

ul {
    margin: 0;
    padding: 0;
    display: flex;
}

ul li {
    list-style: none;
    color: #484848;
    font-size: 80px;
    min-width: 1ch;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li> </li>
  <li>E</li>
</ul>

ch
Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font.

Source: MDN Web Docs

user_55970170

Use white-space:pre

ul {
    margin: 0;
    padding: 0;
    display: flex;
}

ul li {
    list-style: none;
    color: #484848;
    font-size: 80px;
    white-space:pre
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li> </li>
  <li>E</li>
</ul>

user_86203330

Did you try adding a default width:

ul {
    margin: 0;
    padding: 0;
    display: flex;
}

ul li {
    width: 20%;
    list-style: none;
    color: #484848;
    font-size: 80px;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li> </li>
  <li>E</li>
</ul>

user_101401240

to bring in some space between the letters you can try below code...

ul {
    margin: 0;
    padding: 0;
    display: flex;
}

ul li {
    list-style: none;
    color: #484848;
    font-size: 80px;
}

#downshow{
visibility: hidden;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li id="dontshow">D</li>
  <li>E</li>
</ul>

As per above code you have to type in some letters to the extent you need space and then in css styles you can make the visibility as hidden.

user_158777190
Related