How do I get an image to line up with the text in

问题:

I'm trying to align an image with some text within a list item. I can't seem to get them to align though (see image).

How can I get the text and image to align? I am using the default CSS files from Bootstrap and have no customized CSS for any of the classes or elements shown in my markup.

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>
    </ul>
</div>

回答1:

In your CSS put either:

ul img{ display: inline-block; }

or

ul img{ float: left; }

Which should cause the image to be displayed inline with the text.

Alternatively add the image as a background image to the ul and position the text using padding. You can use different images by applying a class (of, for example 'facebook_icon') to the ul.

回答2:

Use Bootstrap list-inline..

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

Bootply