为什么图标不在电子邮件地址和电话号码字段下?我知道我可以通过将它们放在div中来解决这个问题,但必须有一个简单的原因。你能解释一下发生了什么,并告诉我如何解决它。感谢
footer {
width: 100%;
background-color: black;
color: #fff;
}
#foot-address {
list-style-type: none;
display: inline-block;
margin: 2em 2em;
}
#foot-contact {
list-style-type: none;
display: inline-block;
vertical-align: top;
margin: 0 0 0 2em;
}
#facebook-icon {
color: #fff;
display: inline-block;
}

<html>
<head>
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
</head>
<footer>
<ul id="foot-address">
<li>12 The Cross</li>
<li>Bramhope</li>
<li>Leeds</li>
<li>LS16 9AX</li>
</ul>
<ul id="foot-contact">
<li>popsiesfishandchips@yahoo.co.uk</li>
<li>0113 2842178</li>
</ul>
<a href="#" id="facebook-icon"><i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i></a>
<hr>
</footer>
&#13;
答案 0 :(得分:1)
要快速修复(不考虑布局的其余部分),请将最后一条CSS规则更改为:
#facebook-icon {
color: #fff;
display: block;
width: 30px;
margin: 0 auto;
}
https://jsfiddle.net/a5wL2vz7/1/
或者你的意思是这样的:https://jsfiddle.net/11bn4m0o/1/
在此,我将带有图标的a
标记移动到包含邮件地址的ul
标记中。
答案 1 :(得分:1)
我在下面创建了小提琴。请检查并告诉我它是不是你想要的。
<ul id="foot-contact">
<li>popsiesfishandchips@yahoo.co.uk</li>
<li>0113 2842178</li>
<li><a href="#" id="facebook-icon"><i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i></a> </li>
</ul>
答案 2 :(得分:0)
在inline-block
中,您使用了block
。将其替换为#facebook-icon{
color: #fff;
display:block;
}
。
像这样:
$username = mysql_real_escape_string((string) $_POST["username"]);
$password = md5($_POST["password"]);
$query = @mysql_query("SELECT * FROM user WHERE username='$username' AND pwd='$password'");
if (@mysql_num_rows($query) !== 1) {
$html = "Your username or password is wrong<br>".ShowLoginForm();
return;
} else {
$html = "Logged in. <a href='index.php'><font color=\"#9CCFEC\">continue</font></a>";
}
答案 3 :(得分:0)
只需将链接放在public List<string> GetChangedProperties(object A, object B)
{
List<string> changedProperties = new List<string>();
//Compare for changed values in properties
if(A.Age != B.Age)
{
//changedProperties.Add("Age");
}
//Compare other properties
..
..
return changedProperties;
}
<li>
中,Facebook图标就会显示在您的电子邮件和电话号码旁边。
<ul id="foot-contact">