Twitter Boot Text

Question

This is my first question, although I use stack overflow as a regular resource for reference, and it always returns to its original state until now, when I searched and searched and cannot find the answer to this question.

I have a responsive layout, and I'm struggling to get my ul to keep the left edge when the text wraps a smaller screen size, this leads to the transfer of text to the second or third line, which is positioned under the margin save icon. I use bootstrap, and my list also uses the icon icon for bootstraps of glyphics instead of regular bullets as follows:

<ul class="unstyled starlist"> <li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> <li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> <li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> <li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> </ul> 

My (very simple) CSS (outside bootstraps) -

 .startlist li span {Margin-left:15px;} 

I tried so many different methods, none of which seem to work, the closest I show the span as a block that stopped the text from wrapping under the icon, but then the icon will not align correctly with the text and looked bad, the icon looked slightly raised .

I also used 2 divs inside each li and floated to the left inline, which worked until the screen size decreased and all this became messy, I did not try media queries, as there should be a better method for a simple list. I also tried a list-style style, but it would also not match the text.

I am currently using a spreadsheet (don't hit me, this is just a temporary last resort until I figure it out), only for now it looks right, but really would like to help create a list format that works with all screen sizes. Tbh table layout looks perfect and responds well to screen sizes, but its not tabular data and its a lot of code for a simple list with a star for a bullet!

I look forward to any advice (or, if you are told the obvious solution, and look at the idiot!)

Thanks so much in advance Steve.

Answer 1

Here is the solution. wrap the p tag around your li text, set the p marker to the value you need, and use overflow:hidden . Now put your <i> left. That should work.

markup example:

 #left-column .advantages li {font: normal 14px arial; margin:0 0 10px 0; color:#333; list-style:none;} #left-column .advantages li p {margin:0 0 0 20px; overflow:hidden;} #left-column .advantages li i {float:left;} 

Answer 2

Have you tried using the :before implementation?

Something like that:

 .startlist li span:before { content: url(../star.jpg); } 

Answer 3

Try setting the background in the list item with some additions.

 ul.fancy-bullets { list-style-type:none; } ul.fancy-bullets li { background: url(../images/icons/star.png) left top no-repeat; padding-left: 2em; } 

Tried with a long line, and it does not fall under the icon.