0

我有以下代码：http: //jsfiddle.net/kXesZ/。2 个社交媒体图标需要位于背景图像的底部边缘，但我无法将它们内联。我尝试了几件事（display:block-inline、float:left/right assignment 等），但他们所做的只是四处移动。

我在看什么？

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; }
4

2 回答 2

1

您似乎遗漏了几件事/误解/过度思考：

  1. 显示设置是inline-block，不是 block-inline。如果您想控制这些链接的高度/宽度，请确保您的display设置正确。

  2. <a>默认情况下，标签是display: inline指，如果它们有足够的空间，它们会并排放置。如果只需要更改两个项目之间的间距，这就足够了，根本不需要任何display属性。

  3. 您的 Facebook 链接在您的 Fiddle 中没有 ID。确保你的实际标记有它。这可以解释为什么display: block; float: left;不适合你。

  4. 你在 CSS 中的.footer .social #twitter/行太过分了。.footer .social #facebookID 与 CSS 一样具体，并且在有效 HTML 中每个页面仅出现一次。因此，您只需要#twitter/#facebook在您的 CSS 中（这可能不会解决您的问题，但可能会让您免于在其他项目中头疼，并且养成一个好习惯）。

于 2013-02-18T19:08:54.523 回答
0

我已经删除了display:blockand float:left。在这里查看。小提琴似乎有效，但由于它没有显示图标（一个 jsFiddle 问题），ymmv。

于 2013-02-18T18:57:59.387 回答