我正在尝试制作一段简单的代码,使一些链接位于页面的右上角,但它们不会很好地排列。它们一直垂直排列,我希望它们水平排列。我确定这可能是我缺少的明显东西,但我不确定是什么。我也尝试使用 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>
最佳答案
您忘记了 <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>
关于html - 为什么这些按钮不会向左浮动或显示行内 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39213852/