1

这似乎应该如此简单，但玩了几个小时我不知道如何让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>

小提琴

4

5 回答 5

2

添加这个：

.images img {
    display:inline-block;
}

并删除两个休息点<br>......或者只是删除两个休息点。

Demo here

于 2013-09-02T21:43:10.360 回答
2

去掉两个<br>的

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

于 2013-09-02T21:43:17.653 回答
2

只需删除<br><br>它们之间的所有内容即可。什么都不需要。

Js Fiddle Demo

于 2013-09-02T21:43:40.623 回答
2

两者<BR>都无济于事；）

并且不需要任何浮点数....

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

于 2013-09-02T21:44:01.437 回答
1

如果我可以建议，并且我必须强调，您需要图像的用途确实很重要，但最好只有一个纯文本链接并将您的图像用作它的背景图像。当然，这有点繁琐，但它会为您节省大量的定位问题。

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

于 2013-09-02T21:53:22.037 回答