將社交媒體按鈕設置爲標題

Question

我正在通過修改現有的Jekyll主題來設計博客，其中包含標題的標題是一種顏色，而其他頁面則是另一種顏色。我想插入一些圓形圖標（社交網絡等）在一行中，縮進到標題。我覺得這是比較容易用圖片來說明這一點：

其中藍色點是圓形圖標或按鈕。我如何在HTML/CSS中實現這一點？

編輯：

AwokeKnowing給了我一些工具，做我想做的，但他們移動，當我調整我的窗口。

這是我的網頁看起來像我的13" 是什麼筆記本電腦的屏幕：

，但是當我調整它在我的23" 顯示器，我得到：

我希望它看起來像我第一張圖片。這是我的代碼：

HTML

<div> 
<div class="s d"> <a href="mailto:?Subject=Mindfield-{{ page.title }}&amp;Body={{ page.url }}"> 
    <img src="/assets/images/mail-icon.svg" alt="Email" width=40px/> 
    </a></div> 
<div class="s e"><a href="https://www.facebook.com/sharer/sharer.php?u={{site.domain_name}}{{page.url}}" 
     onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"> 
    <img src="/assets/images/Facebook-icon.svg" alt="Facebook" width=40px/></div> 
<div class="s f"><a href="http://twitter.com/share?text={{page.title}}&amp;url={{site.domain_name}}{{ page.url }}" 
     onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"> 
    <img src="/assets/images/Twitter-icon.svg" alt="Twitter" width=40px/></div> 
</div> 

CSS

.s{position:absolute;top:216px;border-radius:50%;background:white;width:45px;height:45px;text-align:center;color:white} 
.d{left:1200px} 
.e{left:1255px} 
.f{left:1310px} 

Answer 1

這裏的東西，讓你開始

.t{padding:20px;background:teal} 
 
.con{position:relative;background:beige} 
 
.c1{padding:20px} 
 
.sc{position:relative;float:right;width:250px;} 
 
.s{position:absolute;top:-10px;left:10px;border-radius:50%;background:blue;width:20px;height:20px;text-align:center;color:white} 
 
.a{left:10px} 
 
.b{left:40px} 
 
.c{left:70px} 
 
.d{left:100px} 
 
.e{left:130px} 
 
.f{left:160px}

<div class="t">Title</div> 
 
<div class="con"> 
 
    <div class="sc"> 
 
    <div class="s a">S</div> 
 
    <div class="s b">O</div> 
 
    <div class="s c">C</div> 
 
    <div class="s d">I</div> 
 
    <div class="s e">A</div> 
 
    <div class="s f">L</div> 
 
    </div> 
 
    <div class="c1">Content</div> 
 
    <div class="c1">Content</div> 
 
    <div class="c1">Content</div> 
 
</div>