Question

您好，我正试图设计我的页脚。在一个块中，我将需要左侧的文本，并在文本内嵌文本内嵌图像（徽标名称将用作文本），并在其后面添加更多文本。我已成功完成此操作，但在我的移动版本中，图像不与文本内联。请参阅.pull-left和.pull-right使用的代码。

HTML

<p class="pull-left">© 2013 
<a href="contact">ENVY BEAUTY</a>
. All rights reserved.
</p>

<p class="pull-right">DESIGNED &amp; MAINTAINED BY 
<a href="http://smugstudios.com.au"><img align="middle" alt="" src="/sites/default/files    /SMUG.FOOTER.STAMP.png" style="width: 50px; height: 30px; float:right; padding-left: 5px; padding-right: 5px; padding-top: 0px; margin-top: 0px; " />
</a>
</p>

CSS

.pull-right { float: right; }

.pull-left { float: left; }

Answer 1

尝试使用，

img{
    vertical-align: middle;
}

或添加到样式vertical-align: middle;

表示您的页脚图片。

Answer 2

<table>
<tr>
<td>© 2013 </td>
<td><a href="contact">ENVY BEAUTY</a></td>
<td>. All rights reserved.</td>
<td>DESIGNED &amp; MAINTAINED BY </td>
<td><a href="http://smugstudios.com.au"><img  alt="" src="/sites/default/files    /SMUG.FOOTER.STAMP.png" style="width: 50px; height: 30px; /></td>
</tr>
</table>

Answer 3

为两个元素设置宽度。我通常使用不超过48％，但使用任何工作。

.pull-right {width: 48%; float: right; }

.pull-left {width: 48%; float: left; }

此外，最近在可能的情况下最好避免使用内联样式。你有一个样式属性。我会在样式表中包含这些样式，类似于：

.pull-right a img {width: 50px; height: 30px; float:right; padding: 0 5px; margin-top: 0; }

我希望这对你有所帮助

Answer 4

只需从float: right代码的内嵌样式中删除img。

<强> Working Fiddle

HTML文本内嵌图像

4 个答案: