Html 如何垂直排列我的社交媒体图标？

我想在我的网站右上角垂直排列我的社交媒体图标。我试着把两者都加上，但似乎不起作用。请看一下我的HtML和CSS代码

HTML代码：

<div id="cover">
<div class="mediaicon">
  <ul>
  <li>
    <a href="https://www.facebook.com/prashant.bagga1" class="fa fa-facebook"></a>
  </li>
  <li>
    <a href="https://www.linkedin.com/in/prashant774/" class="fa fa-linkedin"></a>
  </li>
  <li>
    <a href="https://www.snapchat.com/add/splendidprash" class="fa fa-snapchat"></a>
  </li>
  </ul> 
</div> 
<div class="cover-content">
  <h1>Being A Technocrat</h1>
  <h2>Prashant Bagga</h2>
</div>
</div>

---

检查你的网格系统。如果您使用的是引导，那么将网格系统作为您的网页。

---

我建议你不要追求利润。改用引导

这里有一个实现这一点的最小方法：（编辑前）

只需添加

float:right

和一个伪元素：

.mediacon:：after

和属性

clear:both

.mediaicon {
  padding: 0;
  padding-top: 100px;
  margin-right: 0;
  float: right;
}

.medication::after {
  clear: both;
}

编辑：

将顶部

导航

和

媒体图标

更改为具有不同

对齐内容的flexbox（
居中
和
柔性端
）

此答案假设您希望文本位于视口的中心。
实际上，我建议为此制作两列，一列用于文本，一列用于图标

HTML

我建议您创建一个MCVE（），您只需要以某种方式定位它们<代码>浮动：对

可能就是你要找的？有很多方法可以让事情朝着正确的方向发展。你能用“显示：块”来实现你想要的堆叠吗？非常感谢，先生。。！由于这个代码，我的标题被移到了左上角。你能帮我换一下吗？你想让它们居中吗？因为如果是这样，你只需将

text align:center

添加到

cover content

类中即可。如果你可以用想要的结果（甚至是Ms Paint之类的基本内容）的图像编辑问题，那将非常有用。是的，你添加了一些

CSS

，但我仍然不知道你希望布局如何。这就是为什么我要一张图片先生，我还在学习如何制作一个网站。我不知道Bootstrap，但我会确保使用它。非常感谢你。。！谢谢你，肖恩，但现在我的图标不是垂直的。忘记链接小提琴了。除非我误解了你的问题，否则它是有效的。你可以从上面问题的图像中看到。我只希望水平的图标行是垂直的。位置是正确的（右上角）。它们在小提琴中不是垂直的吗？哦，是的..对。这就是我想要的。只是由于这段代码，cover content类稍微向上移动了一点。我

.mediaicon {
  padding: 0;
  padding-top: 100px;
  margin-right: 0;
  float: right;
}

.medication::after {
  clear: both;
}

<div class="container">
  <div class="social-menu">
    <ul>
      <li>
        <a href="https://www.facebook.com/prashant.bagga1" class="fa fa-facebook"></a>
      </li>
      <li>
        <a href="https://www.linkedin.com/in/prashant774/" class="fa fa-linkedin"></a>
      </li>
      <li>
        <a href="https://www.snapchat.com/add/splendidprash" class="fa fa-snapchat"></a>
      </li>
    </ul>
  </div>
  <div class="cover-content">
    <h1>Being A Technocrat</h1>
    <h2>Prashant Bagga</h2>
  </div>
</div>

.social-menu {
  position: absolute;
  right: 10px;
  top: 10px;
}
.social-menu ul li {
  margin: 20px 0px;
}
.container {
  margin: 0;
  padding: 10px;
  background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
  background-size: cover;
  background-attachment: fixed;
  height: 800px;
  position: relative;
  width: 100%;
}