时间戳

首页 > 解决方案 > 为什么在我的 div 元素之前有一个随机间隙？

html - 为什么在我的 div 元素之前有一个随机间隙？

问题描述

这是我第一次创建网站，我正在写 css，但我被这个小东西困住了。所以我希望 Previous 和 Next 均匀分布并居中，但在 previous 之前似乎有一个间隙，这会使整个事情偏离中心。我尝试过集中，尝试过 inline-block，尝试过浮动，但它总是在那里。我该如何摆脱它？

我的HTML：

  <div class="print">
    <p>Print this article</p>
  </div>

  <div class="social_media">
    <!-- the sharing and social media will go here-->
    <p>Share to:</p>
    <ul>
      <li><img src="../img/whatsapp-fill.svg" alt="whatsapp icon"/></li>
      <li><img src="../img/facebook-fill.svg" alt="facebook icon"/></li>
      <li><img src="../img/twitter-fill.svg" alt="twitter icon"/></li>
      <li><img src="../img/pinterest-fill.svg" alt="pinterest icon"/></li>
    </ul>
  </div>

  <div class="article_nav">
    <a href="#">Previous</a>
    <a href="#">Next</a>
  </div>

我的 CSS

.social_media p {
  float: left;
  margin-right: .75em;
}
.social_media ul {
  list-style-type: none;
}

.social_media ul img, .social_media ul li {
  max-width: 1em;
  display: inline;
}

.article_nav {
  text-align: center;
  display: block;
}


footer {
  float: inherit;
  font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;;
  text-align: center;
  color: rgb(0, 0, 63);
}

这就是它在网站上的显示方式：如您所见，它的偏心

我希望上一个和下一个之间有尽可能多的空间，并且我希望它们在中心对齐。

我认为 .social_media div 有一些问题，因为当我将 html 的顺序更改为：

  <div class="social_media">
    <!-- the sharing and social media will go here-->
    <p>Share to:</p>
    <ul>
      <li><img src="../img/whatsapp-fill.svg" alt="whatsapp icon"/></li>
      <li><img src="../img/facebook-fill.svg" alt="facebook icon"/></li>
      <li><img src="../img/twitter-fill.svg" alt="twitter icon"/></li>
      <li><img src="../img/pinterest-fill.svg" alt="pinterest icon"/></li>
    </ul>
  </div>
  
  <div class="print">
    <p>Print this article</p>
  </div>

  <div class="article_nav">
    <a href="#">Previous</a>
    <a href="#">Next</a>
  </div>

在这里，空间变大了，从这张照片中可以看出：现在打印也是间隔的

标签： htmlcss

解决方案

试试这个

  .article_nav {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin: auto;
  }

  .article_nav a {
      padding: 30px;
  }

推荐阅读