Question

我的网站：www.pkgeek.com

只需向下滚动到页脚，您将看到Powered by，在下一行，您将看到两个图标（Blogger图标和namecheap图标）。我希望这些图标显示在Powered by :(不在下一行）旁边。

我的这些图标和页脚的HTML代码由链接提供支持：

  Powered By: <div class="div123">
<a href="#" title="Hosted on Google Blogger" class="blogger"></a>
<a href="#" title="Subdomains from NameCheap" class="namecheap"></a>
</div></div>

CSS代码：

.div123 {

    }
    .blogger {
    background:url('http://2.bp.blogspot.com/-EcPHtL7JRak/Uz8VLVBfGCI/AAAAAAAAAoc/WOHpaJy7hxg/s1600/blogger.png');
    background-position:0 0;
    width:25px;
    height:25px;
    display:inline-block;
    }

    .blogger:hover {
    background-position:0 25px;

    }

    .namecheap {
    background:url('http://1.bp.blogspot.com/-GOvEY9lWKkU/Uz8VNmQMq5I/AAAAAAAAAok/RRLbRx_EDYc/s1600/Namecheap.png');
    background-position:0 0;
    width:35px;
    height:20px;
    display:inline-block;


    }

    .namecheap:hover {
    background-position:0 20px;
    }

Answer 1

我认为您需要将以下css属性float:left提供给**两张图片和文本。编辑html到它，它的工作原理：

<div style="float:left;">  Powered By:</div> <div class="div123">
<a href="#" title="Hosted on Google Blogger" class="blogger" style="float:left;"></a>
<a href="#" title="Subdomains from NameCheap" class="namecheap" style="float:left;"></a>
</div></div>

Answer 2

用这个替换div：

<div class="poweredbylinks">
<div style="float:left">Powered By:</div> <div class="div123">
<i class="blogger"></i>
<i class="namecheap"></i>
</div>
</div>

Answer 3

删除div poweredbylinks的宽度并添加属性：.poweredbylinks{ vertical-align:top; line-height:25px; }并为div .div123删除width，float和height，并将其样式设置为：.div123{ display:inline-block; }

Answer 4

您可以像这样添加style=" display: inline; "到你的div：jsfiddle

在文本旁边放置两个图像

4 个答案: