- This topic is empty.
-
AuthorPosts
-
January 13, 2015 at 2:00 am #193045V15Participant
I have a problem with a list which needs to be displayed inline. Because I use a html minifier there are no spaces between the < li > elements. Because of this the list items doesn’t break if the screen is not wide enough.
Check my example here:
http://codepen.io/V15/pen/gbmbvVIf you change the width of the browser you can see that the list items only break itself if there are two or more words per item but not if there is only a single word per item.
If you change the html code and put breaks after every < li > it works.
Is there any trick to change this behavior without changing the html? The list is random, I cant’t change only a single list item, because I don’t know if or when this happens.
Hope my description clarifies my problem well enough!?
Thanks for help!January 13, 2015 at 3:04 am #193047kwertyParticipanthttp://codepen.io/anon/pen/vExEqo
Something like that?
January 13, 2015 at 3:16 am #193048V15ParticipantThanks for your answer but this way it breaks the words which is not necessary if the < li > would break.
What I’m looking for is a way to get the “normal” behavior even without the space between the < li >
-> I updated my CodePen Example
January 13, 2015 at 3:30 am #193049BeverleyhParticipantHow about if you change
li { display:inline; }
to
li { display:inline-block; }
?(and maybe pop a bit of padding-right on there too)
January 13, 2015 at 3:39 am #193050V15ParticipantI tried
li { display:inline-block; }
as well but than the break between the word in one item doesn’t work anymore and every line starts with a new list item instead of filling up the previous line until the space between two words…
January 13, 2015 at 3:48 am #193051kwertyParticipanthttp://codepen.io/anon/pen/YPZXWz
Not sure this is what you need.
thanks.
January 13, 2015 at 3:49 am #193052BeverleyhParticipantYes, that’s why I said to try it with a bit of padding-right on there too ;) It doesn’t behave exactly the same way as your preferred method but the padding-right mimics the space so it might be a suitable workaround.
January 13, 2015 at 4:57 am #193062V15Participant@kwerty
Thats it :-)
Thanks so much!
@Beverleyh
Nope that doesn’t work the way I want it. But thanks a lot for pointing this out anyway. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.