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

Question

我想在我网站的右上角垂直排列我的社交媒体图标。我尝试添加清除两者，但它似乎没有工作。请看一下我的HtML和CSS代码。

HTML code：

<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>

CSS代码：

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

 .mediaicon li {
 clear: both!important;
 }

 .fa {
 padding: 10px;
 font-size: 15px;
 width: 15px;
 text-align: center;
 text-decoration: none;
 margin: 5px 5px;
 border-radius: 100%;
 }

.fa:hover {
opacity: 0.5;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#cover {
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%;
}
.cover-content {
box-sizing: border-box;
margin: 0 auto;
position: relative;
text-align: center;
top: 100px;
width: 100%;
height: 800px;
}

h1 {
color: #FFF;
font-family: 'Lobster', cursive;
font-size: 600%;
line-height: 60px;
padding-top: 0;
text-align: center;
}

h2 {
color:#FFF;
font-family: 'Josefin Sans', sans-serif;
font-size: 25px;
font-weight: 900;
text-align: center;
text-transform: uppercase;
letter-spacing: 20px;
}

Answer 1

以下是实现此目标的最简单方法：（编辑前）

只需添加@Cacheable(....., key={#key1,#key2}) 和伪元素：public class MultiKeySerializer implements RedisSerializer<Object>{ private final Charset charset; public MultiKeySerializer() { this(Charset.forName("UTF8")); } public MultiKeySerializer(Charset charset) { Assert.notNull(charset); this.charset = charset; } @Override public byte[] serialize(Object t) throws SerializationException { if(t instanceof ArrayList){ StringBuilder sb = new StringBuilder(); ArrayList tList = (ArrayList) t; for(Object o: tList){ sb.append(o == null ? null: o.toString()); } String string = sb.toString(); return (string == null ? null : string.getBytes(charset)); } // return null - used to return null. Root cause. return t == null ? null : t.toString().getBytes(charset); } @Override public String deserialize(byte[] bytes) throws SerializationException { return (bytes == null ? null : new String(bytes, charset)); } } ，其属性为float: right

.mediaicon::after

修改

将前clear: both和.mediaicon { padding: 0; padding-top: 100px; margin-right: 0; float: right; } .medication::after { clear: both; } 更改为具有不同nav（media icons和justify-content）

的Flexbox

Working fiddle

Answer 2

检查您的网格系统。如果您使用的是bootstrap，那么请创建网页的网格系统。 我建议你去寻找保证金。使用Bootstrap代替。

Answer 3

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

HTML

<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>

更改了CSS

.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%;
}

https://jsfiddle.net/fLnkvo2z/1/