Issue with displaying list items css

Question

I've got a list item which has these elements :

First item
Another list item
Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials

And I want them to look they do look above in this question all in one line or if the item gets too big break it nicely like this :

Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials big name which is aligning nicely

But instead my items look like this(screen shot) :

enter image description here

As you can see it doesn't look good. This is my html structure :

<ul class="something">
  <li>
     <div style="width:auto; display:inline-block;">
       <span>This is where super long text goes text goes</span>
     </div>
  </li>
</ul>

ul and li don't have any style on them just those inherited from bootstrap css.

Which css do I use so that my list from the screen shot looks like the first one in this question?

Joris Lindhout · Accepted Answer · 2013-09-13 09:29:12Z

1

<ul class="something">
  <li>
       This is where super long text goes text goes
  </li>
</ul>

answered Sep 13, 2013 at 9:29

Joris Lindhout

2052 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gandalf StormCrow Over a year ago

Hi Joris, I can't do that as we're using plugin which puts the div around my span element

Joris Lindhout Over a year ago

jsfiddle.net/8hfgR - or is it also impossible to change the inline styles?

Kisiou · Accepted Answer · 2013-09-13 09:36:10Z

0

Just add

ul.something li div {vertical-align: top}

and it should work as you want it to.

answered Sep 13, 2013 at 9:36

Kisiou

514 bronze badges

Comments

BenM · Accepted Answer · 2013-09-13 09:36:52Z

0

If you want horizontal lists, use the following CSS:

li{display:inline;}

answered Sep 13, 2013 at 9:36

BenM

4,2682 gold badges34 silver badges58 bronze badges

Comments

maikelsabido · Accepted Answer · 2013-09-13 09:38:48Z

0

Put this on your stylesheet:

.something li div{display:inline;}

answered Sep 13, 2013 at 9:38

maikelsabido

1,3274 gold badges19 silver badges37 bronze badges

Comments

Saritha.S.R · Accepted Answer · 2013-09-13 09:46:09Z

0

Try this: In your code display:inline-block is breaking the list. So try after removing that

<ul >
  <li><div style="width:auto; "><span>First item</span></div></li>
  <li><div style="width:auto;"><span>Another list item</span></div></li>
 <li><div style="width:auto;"><span>Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials</span></div></li>
</ul>

answered Sep 13, 2013 at 9:46

Saritha.S.R

8002 gold badges6 silver badges19 bronze badges

Collectives™ on Stack Overflow

Issue with displaying list items css

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related