CODEWITHSUNDEEP
htmlcss
sgch
sgch

Reputation: 139

Not breaking line after li and keep the bullet

I want to not break line after li and keep the bullet. Meaning using the style display: inline which removes the bullet is not good for me.

Is there a way to do it?

This is what I have:

li {float: left; clear: left;}
span {float: left;}
<ul class="c2">
    <div>
        <span>
           <li>line1</li>
           <li>line2</li>
           <li>line3</li>
           <li>line4</li>
       </span>        
       <span>I want this in same line as line4</span>
    </div>
</ul>

the problem is that whenever li is used since its display style is list-item, the line breaks.

Upvotes: 1

Views: 181

Answers (2)

Mateusz Piguła
Mateusz Piguła

Reputation: 136

You can use grid for ul element.

.c2 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px; // optional
}

li {
  grid-column: 1;
}
<ul class="c2">
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
    <li>line4</li>
    <span>I want this in same line as line4</span>
</ul>

Upvotes: -1

pavel
pavel

Reputation: 27092

The clearest solution is to put span into last li (span can't be inside UL element).

<ul class="c2">
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
    <li>line4 <span>I want this in same line as line4</span></li>
</ul>

If you need to have span as a solo element (I've used your code), than you can use something like that

li {float: left; clear: left;}
span {float: left;}
<ul class="c2">
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
    <li>line4</li>
    <span>I want this in same line as line4</span>
</ul>

Upvotes: 2

Related Questions