html - 为什么这些按钮不会向左浮动或显示行内 block ？

Question

我正在尝试制作一段简单的代码，使一些链接位于页面的右上角，但它们不会很好地排列。它们一直垂直排列，我希望它们水平排列。我确定这可能是我缺少的明显东西，但我不确定是什么。我也尝试使用 float left 但它没有改变任何东西。

CSS 和 HTML

.social {
  position: fixed;
  right: 0;
  /*   display:inline-block; */
  /*   float:left; */
}
.social-buttons-list {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
  /*   display: inline-block; */
  /*   float:right; */
}
.social-button {
  margin: 5px;
  width: 50px;
  height: 50px;
  display: inline-block;
  /*   float:right; */
}

<div class="social">
  <ul class="social-buttons-list">
    <li>
      <a href="">
        <img src="img/Twitter.png" alt="" class="social-button">
      </a>
    </li>
    <li>
      <a href="">
        <img src="img/Facebook.png" alt="" class="social-button">
      </a>
    </li>
    <li>
      <a href="">
        <img src="img/Snapchat.png" alt="" class="social-button">
      </a>
    </li>
  </ul>
</div>

Answer 1

您忘记了 <li>您列表中的默认值 display:block .通过解决这个问题并添加 text-align: right在您的列表中，您将获得一个水平的、右对齐的列表。

.social {
  position: fixed;
  right: 0;
  /*   display:inline-block; */
  /*   float:left; */
}
.social-buttons-list {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
  /*   display: inline-block; */
  /*   float:right; */
  text-align: right;
}
.social-buttons-list li {
  display: inline-block;
}
.social-button {
  margin: 5px;
  width: 50px;
  height: 50px;
  display: inline-block;
  /*   float:right; */
}

<div class="social">
  <ul class="social-buttons-list">
    <li>
      <a href="">
        <img src="img/Twitter.png" alt="" class="social-button">
      </a>
    </li>
    <li>
      <a href="">
        <img src="img/Facebook.png" alt="" class="social-button">
      </a>
    </li>
    <li>
      <a href="">
        <img src="img/Snapchat.png" alt="" class="social-button">
      </a>
    </li>
  </ul>
</div>