my in my HTML page my look like this :

And I would like it to look like this :

How I can do that with HTML and CSS ?

<ul>
    <li>Java &#9733;&#9733;&#9733;&#9733;</li>
    <li>Python &#9733;&#9733;&#9733;&#9733;</li>
    <li>HTML/CSS &#9733;&#9733;&#9733;</li>
    <li>SQL &#9733;&#9733;&#9733;</li>
    <li>JavaScript &#9733;&#9733;&#9733;</li>
    <li>PHP &#9733;&#9733;</li>
    <li>C &#9733;&#9733;</li>
    <li>Scala&#9733;</li>
</ul>

Thanks for your help :) !

CodePudding user response：

Wrap the stars inside a span and consider a table layout

ul {
  display: table;
}

li {
  display: table-row;
}

li span {
  display: table-cell;
}

<ul>
  <li>Java <span>&#9733;&#9733;&#9733;&#9733;</span></li>
  <li>Python <span>&#9733;&#9733;&#9733;&#9733;</span></li>
  <li>HTML/CSS <span>&#9733;&#9733;&#9733;</span></li>
  <li>SQL <span>&#9733;&#9733;&#9733;</span></li>
  <li>JavaScript <span>&#9733;&#9733;&#9733;</span></li>
  <li>PHP <span>&#9733;&#9733;</span></li>
  <li>C <span>&#9733;&#9733;</span></li>
  <li>Scala <span>&#9733;</span></li>
</ul>

CodePudding user response：

One solution would be to isolate the text and the HTML entities in their own span elements. Then you can nest these new elements in div's and use flex to align them. Then just define a width for your for the second span and you are good to go. I chose 80px based on the longest rendered width of the text, which happened to be (HTML/CSS).

div {
  display: flex;
  align-items: center;
}

li {
  list-style-type: none;
}

div>span:nth-child(1) {
  width: 80px;
}

<ul>
  <li>
    <div>
      <span>Java</span>
      <span>&#9733;&#9733;&#9733;&#9733;</span>
    </div>
  </li>
  <li>
    <div>
      <span>Pyhton</span>
      <span>&#9733;&#9733;&#9733;&#9733;</span>
    </div>
  </li>
  <li>
    <div>
      <span>HTML/CSS</span>
      <span>&#9733;&#9733;&#9733;</span>
    </div>
  </li>
  <li>
    <div>
      <span>SQL</span>
      <span>&#9733;&#9733;&#9733;</span>
    </div>
  </li>
  <li>
    <div>
      <span>JavaScript</span>
      <span>&#9733;&#9733;&#9733;</span>
    </div>
  </li>
  <li>
    <div>
      <span>PHP</span>
      <span>&#9733;&#9733;</span>
    </div>
  </li>
  <li>
    <div>
      <span>C</span>
      <span>&#9733;&#9733;</span>
    </div>
  </li>
  <li>
    <div>
      <span>Scala</span>
      <span>&#9733;</span>
    </div>
  </li>
</ul>