如何垂直安排我的社交媒體圖標？

我想將我的社交媒體圖標垂直排列在我的網站右上角。我嘗試添加清楚，但它似乎並沒有工作。請看看我的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>

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

來源

2017-05-26 Prashant

我建議你創建一個MCVE（https://stackoverflow.com/help/mcve）：// jsfiddle.net/ –

你只需要以某種方式來定位它們。 'float：right'可能是你要找的東西？有很多方法可以使某些事情順利進行。 https://codepen.io/anon/pen/gWyKPq –

你可以使用「display：block」來實現你想要的堆疊它們嗎？ – TCharb

這個回答假設你要集中在視口中的文本。我實際上建議爲此製作2列，一個用於文本，另一個用於圖標。

使用HTTPS

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/

來源

2017-05-26 19:38:45

謝謝肖恩，但現在我的圖標不是垂直的。 – Prashant

它沒有工作@海恩 – Prashant

忘了鏈接小提琴。它工作，除非我誤解你的問題。 –

檢查您的電網系統。如果你正在使用bootstrap，那麼使你的網頁的網格系統。我建議你不要去保證金。改用Bootstrap。

來源

2017-05-26 18:34:23

先生，我仍然在學習如何製作一個網站。我不知道Bootstrap，但我會確保使用它。非常感謝tho ..！ – Prashant

這裏是一個最小的方式實現這一目標：（編輯之前）

只需添加float: right和僞元素：.mediaicon::after財產clear: both

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

.medication::after { 
    clear: both; 
}

編輯：

將頂部nav和media icons更改爲不同的flexbox NT justify-content（center和flex-end）

Working fiddle

來源

2017-05-26 18:37:55

非常感謝先生..！ – Prashant

由於此代碼，我的標題轉移到左上角。你能幫我改變它嗎？ – Prashant

你想讓它們居中嗎？因爲如果是這樣，你可以將'text-align：center'添加到'cover-content'類。 –

如何垂直安排我的社交媒體圖標？

回答

相關問題