CODEWITHSUNDEEP
css
Sheldon
Sheldon

Reputation: 10097

How do I prevent this list from moving across the page?

I'm trying to align an image with some text within a list item. I had previously asked a similar question but the solution(s) appeared to present a new challenge and I wanted to include an image to show what was going wrong.

How can I get the text and image to align in my list and prevent this (see image) diagonal behaviour from occurring?

Markup:

<div class="col-md-3">
    <ul class="nav">
        <li><%= link_to "Connect", "#", class: "footer-heading" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
    </ul>
</div>

CSS:

li img{ 
   float: left;
 }

With the current CSS I am getting this effect:

enter image description here

Upvotes: 1

Views: 58

Answers (3)

Abhitalks
Abhitalks

Reputation: 28417

I assume that you are looking for a vertical list but which is neatly aligned left. Isn't it?

You can do away with img tags and use backgrounds on li.

Fiddle: http://jsfiddle.net/V2Zxb/

Give a class to your anchors, and use left padding to offset the logos:

a.fb {
    background-image: url(facebook.png);
    background-position: top left;
    background-repeat: no-repeat;
    line-height: 36px;
    display: inline-block;
    padding-left: 36px;
}

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362640

Use Bootstrap list-inline..

<div class="col-md-3">
    <ul class="list-inline">
        <li>-</li>
        <li>-</li>
        <li>-</li>
    </ul>
</div>

Bootply

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

li{ overflow:hidden; } or li{ float:left; clear:both; }

Upvotes: 2

Related Questions