div大小不等于顶部和底部

Question

在以下代码中，我发现div的大小与ul的顶部和底部不相等。

即使我将填充相等，div仍然没有相同的大小。 有什么问题？

.footer {
  background-color: #4dbce9;
  padding: 40px 0;
  text-align: center;
  color: #fff;
}
.footer ul,
li {
  display: inline-block;
}
.footer a {
  font-size: 14pt;
  padding-right: 20px;
  color: #fff;
}

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-2">
      </div>

      <div class="col-md-8">
        <ul>
          <li>
            <a href="https://www.facebook.com/rony.fhebrian" />Facebook
          </li>
          <li>
            <a href="https://www.twitter.com/ronyfhebrian" />Twitter
          </li>
          <li>
            <a href="https://ronyfhebrian.wordpress.com" />Blog
          </li>
          <li>
            <a href="mailto:rony.fhebrian@outlook.com">Contact
          </li>
        </ul>
      </div>

      <div class="col-md-2">
      </div>

    </div>
  </div>
</div>

Answer 1

缺少<a>结束标记。

＆＃13;

＆＃13;

.footer {
  background-color: #4dbce9;
  padding: 40px 0;
  text-align: center;
  color: #fff;
}
.footer ul,
li {
  display: inline-block;
}
.footer a {
  font-size: 14pt;
  padding-right: 20px;
  color: #fff;
}

＆＃13;

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-2">
      </div>

      <div class="col-md-8">
        <ul>
          <li>
            <a href="https://www.facebook.com/rony.fhebrian">Facebook</a>
          </li>
          <li>
            <a href="https://www.twitter.com/ronyfhebrian">Twitter</a>
          </li>
          <li>
            <a href="https://ronyfhebrian.wordpress.com">Blog</a>
          </li>
          <li>
            <a href="mailto:rony.fhebrian@outlook.com">Contact</a>
          </li>
        </ul>
      </div>

      <div class="col-md-2">
      </div>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的ul元素应如下所示：

<ul>
        <li>
          <a href="https://www.facebook.com/rony.fhebrian">Facebook</a>
        </li>
        <li>
          <a href="https://www.twitter.com/ronyfhebrian">Twitter</a>
        </li>
        <li>
          <a href="https://ronyfhebrian.wordpress.com">Blog</a>
        </li>
        <li>
          <a href="mailto:rony.fhebrian@outlook.com">Contact</a>
        </li>
</ul>

'a'链接标记不是自动关闭

Answer 3

尝试关闭<a>代码..

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <ul>
                    <li>
                        <a href="https://www.facebook.com/rony.fhebrian" />Facebook</a>
                    </li>
                    <li>
                        <a href="https://www.twitter.com/ronyfhebrian" />Twitter</a>
                    </li>
                    <li>
                        <a href="https://ronyfhebrian.wordpress.com" />Blog</a>
                    </li>
                    <li>
                        <a href="mailto:rony.fhebrian@outlook.com">Contact</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>