list style when text is too long , how to adjust the second line?-CodePudding

i'm new on web development and i encounter a problem. I'm designing a mobile website and the list text is too long and it breaks to a second line, so i want to adjust the second line to the level where the text starts. I'm using bootstrap 5

at the moment my list looks like this actual

i want it to look like this wanted

HTML

        <div >
          
          <ul>
            <p >
            <li><i ></i>5% marketing and strategic alliances</li> 
            <li><i ></i>10% Metadata release (Rarity tools) Focus on community growth</li>
            <li><i ></i>25% Listing in Magic Eden</li> 
            <li><i ></i>50% First Donation to partners</li> 
            <li><i ></i>65% Increase in marketing investment</li> 
            <li><i ></i>80% Bluepaper Publication of Phase 2</li> 
            <li><i ></i>100% Second Donation to partners</li> 
            </p>
          </ul>
        </div>
  
      </div>

CSS

  .Roadmap-body li {
      list-style: outside;
      padding: 0% 0% 5% 0%;
      text-align: left;    
      width: 100%; 
        margin-left: auto; 
        margin-right: auto; 
 
    }

    .fa-fish{
      padding-right:  7%;
    }

thank you by advance everyone !

EDIT i change the ui tag to ul and now looks like this enter image description here

CodePudding user response：

You can use display: inline-flex for all li tags. But note that this will cause the bullets to be removed.

However, if you want to have the icon with the bullets, you can use the following example.

.parent > li{
  display: inline-flex;
}
.fixed-icon{
  background:red;
  white-space: nowrap;
  margin: 4px;
  position: relative;
}
.fixed-icon::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 100%;
  position: absolute;
  left: -13px;
  top: 5px;
}

<ul >
  <li>
    <i >Icon 1</i>
    Lorem ipsum dolor sit amet
  </li>
  <li>
    <i >Icon 2</i>Lorem ipsum dolor sit
    amet, consectetur adipiscing elit
  </li>
</ul>

CodePudding user response：

Dealing with tables is not always easy when it comes to content alignment. You could, instead, use a Flexbox solution that'll allow you to align content more freely, as well as have your line break problem solved.

Here's the HTML for it:

<div >
    <div >
        <i ></i>
        <i ></i>
        <p>5% marketing and strategic alliances</p>
    </div>
    <div >
        <i ></i>
        <i ></i>
        <p>10% Metadata release (Rarity tools) Focus on community growth</p>
    </div>
    <div >
        <i ></i>
        <i ></i>
        <p>25% Listing in Magic Eden</p>
    </div>
    <div >
        <i ></i>
        <i ></i>
        <p>50% First Donation to partners</p>
    </div>
    <div >
        <i ></i>
        <i ></i>
        <p>65% Increase in marketing investment</p>
    </div>
    <div >
        <i ></i>
        <i ></i>
        <p>80% Bluepaper Publication of Phase 2</p>
    </div>
    <div >
        <i ></i>
        <i ></i>
        <p>100% Second Donation to partners</p>
    </div>
</div>

And here's the CSS:

.fa-fish{
    margin: 0 10px;
}

.test-item {
    display: flex;
    align-items: center;
}

This is a very basic solution, but you should be able to improve it with minor CSS and HTML tweaks. Also, please note that I've used a Font Awesome small circle icon to mimic the list item bullet points. I do not know if this is a valid approach, but there it is anyway. Hope it helps!