Question

我有以下代码：http://jsfiddle.net/kXesZ/。 2个社交媒体图标需要位于背景图像的底部边缘，但我不能让它们内联。我尝试了几件事（显示：块内联，浮动：左/右分配等），但他们所做的只是四处走动。

我在俯瞰什么？

HTML

<div class="footer">
    <div class="left">
        <h3>Title</h3>
        <p>
            Lorem ipsum
        </p>
    </div>
    <div class="right">
        <h3>Title</h3>
        <p>Title</p>
        <p>
            <b>Telephone:</b> 012345678<br/>
            <b>E-mail:</b> abc@abc.com
        <p>
        <div class="social">
            <a href="http://facebook.com" title="" id="facebook">Facebook</a>
            <a href="http://twitter.com" title="" id="twitter">Twitter</a>
        </div>
    </div>

CSS

body { font:14px Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; color:#282828; text-align:left; }
.footer { background:url('http://i.imgur.com/AhHgSJr.jpg') no-repeat; padding:5px; width:984px; height:268px; }
.footer .left { display:block; width:252px; float:left; padding:98px 0 0 40px; }
.footer .right { display:block;  width:252px; float:right; padding:98px 40px 0 0; }
.footer h3 { color:#a0cf67; font-size:21px; font-weight:bold; }
.footer p { padding:0 0 26px 0; }
.footer .social #facebook { background:url('http://i.imgur.com/g20ltEP.png') no-repeat; float:left; display:block; width:59; height:55px; overflow:hidden; text-indent:100%; white-space:nowrap; }
.footer .social #twitter { background:url(http://i.imgur.com/xteWM7e.png) no-repeat; display:block; width:58px; height:45px; overflow:hidden; text-indent:100%; white-space:nowrap; }
.footer-container .bottom-container { text-align:center; }

Answer 1

你似乎缺少一些东西/误解/过度思考：

显示设置为inline-block，不 block-inline。如果您想控制这些链接的高度/宽度，请确保display设置正确无误。
<a>标记为display: inline，这意味着，如果它们有足够的空间，则它们将彼此相邻。如果您只需要更改两个项目之间的间距，这就足够了，根本不需要display属性。
您的Facebook链接在您的小提琴中没有ID。确保你的实际标记有它。这可以解释为什么display: block; float: left;不适合你。
您在CSS中使用.footer .social #twitter / .footer .social #facebook行过火了。 ID与CSS具体相同，并且在有效HTML中每页只出现一次。因此，您只需要在CSS中使用#twitter / #facebook（这可能不会解决您的问题，但可能会让您免于其他项目的麻烦，并且养成良好的习惯）。< / p>

Answer 2

我已移除display:block和float:left。查看here。小提琴似乎有用，但由于它没有显示图标（jsFiddle问题），ymmv。

div不能并排

2 个答案: