为什么这些按钮不会向左浮动或显示内联块?

时间:2016-08-29 19:35:43

标签: html css

我正在尝试制作一段简单的代码,使得某些链接位于页面的右上角,但它们不能很好地排列。它们一直垂直排列,我希望它们是水平的。我确定它可能是我想念的东西,但我不确定是什么。我也试过使用左手浮动,但它没有改变任何东西。

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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:6)

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

&#13;
&#13;
.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; */
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

它们正在对齐,因为您有“无序列表”中的按钮,它们用于显示列表。只需删除它们

.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">
      <a href="">
        <img src="img/Twitter.png" a class="social-button">
      </a>
      <a href="">
        <img src="img/Facebook.png"  class="social-button">
      </a>
      <a href="">
        <img src="img/Snapchat.png"  class="social-button">
      </a>
</div>

答案 2 :(得分:0)

ul {
    list-style-type: none;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
}

http://codepen.io/anon/pen/BLBBWG

这是您的解决方案