我需要这些图像彼此相邻显示

This seems like it should be so simple but playing around for hours I cannot figure out how to make the linkedIn and GitHub images show up next to each other.

这似乎应该是如此简单,但玩了几个小时我无法弄清楚如何使linkedIn和GitHub图像显示在彼此旁边。

 <h1>Contact Me:</h1>

<p>
    <div>
            <h2>School Email:</h2>
    <a class="tabbed" href="mailto:me@email.com">me@email.com</a> 
        <br>
        <br>
    </div>
    <div>
            <h2>Check me out on:</h2>   <span class="images">
                                        <a href="http://www.linkedin.com/pub/john-doe" target="_blank"><img style="border:none; margin-top: 5px;" src="http://s8.postimg.org/6x5pyi5o1/Linkedinbutton.gif" alt="LinkedIn"></a><br><br>
                                        <a href="https://github.com/johndoe" target="_blank"><img title="Check me out on GitHub!" style="border:none; margin-top: 5px;" src="http://s22.postimg.org/ujhomd9st/Git_Hub.png" alt="GitHub"></a><br><br>
                                    </span>

    </div>
    <div>
            <h2>School Address:</h2>

        <p class="tabbed">Sandburg Residence Hall Box #S1993
            <br>3400 N Maryland Avenue
            <br>Milwaukee Wi, 53211
            <br>
        </p>
    </div>
</p>
<p style="font-size:13px;">This page was created with the help and much thanks of <a href="http://code.google.com/p/how-to-create-tabs-in-html-using-jquery/downloads/detail?name=how-to-create-tabs-in-html-using-jquery.zip&can=2&q=s">this</a> tutorial.</p>

fiddle

5 个解决方案

#1

Add this:

.images img {
    display:inline-block;
}

and delete both breaks  ... or just delete both of the breaks.

并删除两个中断
...或只删除两个中断。

Demo here

#2

Remove the two 's

删除两个

<span class="images">
    <a href="http://www.linkedin.com/pub/john-doe" target="_blank"><img style="border:none; margin-top: 5px;float:left;" src="http://s8.postimg.org/6x5pyi5o1/Linkedinbutton.gif" alt="LinkedIn"></a>
    <a href="https://github.com/johndoe" target="_blank"><img title="Check me out on GitHub!" style="border:none; margin-top: 5px;" src="http://s22.postimg.org/ujhomd9st/Git_Hub.png" alt="GitHub"></a><br><br>
</span>

http://jsfiddle.net/KKXSD/15/

#3

Just remove the   between them and its all done. No need to anything.

只需删除它们之间的

即可完成所有操作。不需要任何东西。

Js Fiddle Demo

Js Fiddle演示

#4

The two  's won't help ;)

这两个
不会有帮助;)

and no float left is needed....

并且不需要浮动....

if you still encounter problems, just add display: inline-block;

如果你仍然遇到问题,只需添加display:inline-block;

#5

If I may suggest, and I have to emphasize that it really matters what you need images for, but it would be better to just have a plain text link and use your image as a background image of it. Sure, it is a bit fiddly, but it will save you loads of positioning issues.

如果我可以建议,我必须强调,你需要图像真的很重要,但最好只有一个纯文本链接并使用你的图像作为它的背景图像。当然,它有点繁琐,但它可以节省大量的定位问题。

Check out this link: http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/

看看这个链接:http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/

#1