Question

这看起来应该是如此简单但是玩了几个小时我无法弄清楚如何使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

Answer 1

添加：

.images img {
    display:inline-block;
}

并删除两个中断<br> ... 或只需删除这两个中断。

Demo here

Answer 2

删除两个＆lt; br＆gt;的

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

Answer 3

只需删除它们之间的<br><br>即可。不需要任何东西。

Js Fiddle Demo

Answer 4

这两个<BR>无济于事;）

并且不需要浮动....

如果您仍遇到问题，只需添加display: inline-block;

即可

Answer 5

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

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

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

5 个答案: