Align icons to all succeeding lists-CodePudding

Current situation:

CARRIER >
CRAWLER CARRIERS >
SPIDER BOOM >

Current code:

<ul>
   <li>
    <label>CARRIER<i ></i></label>
    <label>CRAWLER CARRIERS<i ></i></label>
    <label>SPIDER BOOM<i ></i></label>
   <li>
<ul>

CSS

ul li label {
    color: #E31937 !important;
    font-family: "Helvetica", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

ul li label i::before {
    padding-left: 15px;
}

Expected Output: Align all icons vertically.

CodePudding user response：

You need to set label's display as block, and i's display as inline-block and float right. FYI, you didn't close your <li>.

CSS

ul li label {
    color: #E31937 !important;
    font-family: "Helvetica", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    display: block; /*add this*/
}
ul li label i{
    display: inline-block;
    float: right;
}

CodePudding user response：

You could either make each label a Flexbox and align the text and icon, OR, use a grid or table, OR make your label a block element and i to float right. In every case, you're advised to set the element width.

Proof-of-concept with Flexbox:

ul li label {
  display: flex;
  justify-content: space-between;
  width: 220px;
  color: #E31937 !important;
  font-family: "Helvetica", Sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<ul>
  <li>
    <label>CARRIER<i ></i></label>
  </li>
  <li>
    <label>CRAWLER CARRIERS<i ></i></label>
  </li>
  <li>
    <label>SPIDER BOOM<i ></i></label>
  </li>
</ul>

CodePudding user response：

It's not clear what you want to achieve...

This is VERTICAL alignment:

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li label {
  color: #E31937 !important;
  font-family: "Helvetica", Sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<ul>
  <li> <label>CARRIER<i ></i></label></li>
  <li> <label>CRAWLER<br>CARRIERS<i ></i></label></li>
  <li> <label>SPIDER BOOM<i ></i></label></li>
</ul>

If you think @technophyle answer is correct, it's HORIZONTAL alignment. Ask the right question.