问题描述
我希望将两个脸书和推特图片与文字一致,以便所有内容在页脚中与彼此相符
目前我的页脚代码是
HTML -
< div class =footer content>
< img src =图片/ facebook.png>
< img src =图片/ twitter.png>
< p>地址行1
地址行2
地址行3
< / p>
< / div> <! - 页尾结束 - >
任何人都可以帮忙吗?
< p>
标签是块级元素。使用一个内联元素,比如< span>
:
$ b
< div class =footer content>
< img src =图片/ facebook.png/>
< img src =图片/ twitter.png>
< span>
地址行1
地址行2
地址行3
< / span>
< / div>
或者,如果您可以使用CSS,则可以将这两个元素定义为 inline-block
:
.footer.content> img,
.footer.content> p {
display:inline-block;
}
编辑:明智地使用< address>
,而不是< span>
。例如:
$ b
< div class =footer content>
< img src =图片/ facebook.png/>
< img src =图片/ twitter.png>
<地址>
地址行1
地址行2
地址行3
< / address>
< / div>
因为< address>
也是块级元素,你需要包含如下正确的CSS:
.footer.content>地址{
display:inline-block;
}
I'm creating the footer of my website using html and css.
I want to have the two facebook and twitter images in line with the text so that everything in the footer is in line with eachother
At the moment my footer code is
HTML -
<div class="footer content">
<img src="Images/facebook.png">
<img src="Images/twitter.png">
<p> Address line 1
Address line 2
Address line 3
</p>
</div> <!--end of footer-->
Can anyone help please?
<p>
tags are block-level elements. Use an inline element such as <span>
:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<span>
Address line 1
Address line 2
Address line 3
</span>
</div>
Alternatively, if you're able to use CSS, you can define both elements as inline-block
:
.footer.content > img,
.footer.content > p {
display: inline-block;
}
EDIT: It might also be wise for semantics to use <address>
, rather than <span>
. For example:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<address>
Address line 1
Address line 2
Address line 3
</address>
</div>
Since <address>
is also a block-level element, you'll need to include the correct CSS as follows:
.footer.content > img,
.footer.content > address {
display: inline-block;
}
这篇关于如何让图像符合CSS中的文字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!