内容未定位

时间:2017-03-15 12:07:50

标签: html css

为什么图标不在电子邮件地址和电话号码字段下?我知道我可以通过将它们放在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;
&#13;
&#13;

https://jsfiddle.net/dsohk0nz/

4 个答案:

答案 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>

https://jsfiddle.net/dsohk0nz/1/

答案 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">