如何在同一行上放置文本和社交媒體圖標

我試圖在我的單頁網站的頁腳上對齊某些文本兩側的x2社交媒體圖標。如何在同一行上放置文本和社交媒體圖標

以下是我希望它在桌面/寬屏幕上顯示的示例。 Desktop/Wide Screens

這裏是我希望如何顯示在移動/窄屏幕上的一個例子。 Mobile/Narrower Screens

我已經進入低於我的代碼到目前爲止（目前沒有的社交媒體圖標中）

附：我的社交媒體圖標保存爲facebook.png和twitter.png

body { 
 
    background-color: #000; 
 
    font-family: 'Roboto Mono', 'Arial', sans-serif; 
 
    font-size: 250%; 
 
    font-weight: 300; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    margin: 50px auto; 
 
} 
 

 

 
p { 
 
    color: #ccc; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 

 
.coming-soon { 
 
    color: #333; 
 
    letter-spacing: 3px; 
 
} 
 

 
.autumn-2017 { 
 
    color: #ccc; 
 
} 
 

 
section p { 
 
    display: block; 
 
    margin: 50px auto 10px; 
 
    font-size: 35%; 
 
    text-transform: none; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #333; 
 
} 
 

 
.contact-info { 
 
    margin: 15px auto; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #ccc; 
 
    text-decoration: none; 
 
    text-transform: none; 
 
    font-size: 35%; 
 
} 
 

 
a:link, 
 
a:visited { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    transition: font-weight 0.2s; 
 
} 
 

 
a:hover, 
 
a:active { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    font-weight: 500; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="desctription" content="Web Design & Development"> 
 
     
 
     <link rel="stylesheet" type="text/css" href="normalize.css"> 
 
     <link rel="stylesheet" type="text/css" href="grid.css"> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
     <link rel="stylesheet" type="text/css" href="queries.css"> 
 
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700" rel="stylesheet"> 
 
    
 
     <meta name="msapplication-config" content="resources/favicons/browserconfig.xml"> 
 
     
 
    </head> 
 
    <body> 
 
     <header> 
 
      
 
      <div> 
 
       <img src="iz-icon-logo.png" class="logo" alt="logo"> 
 
       <p><span class="coming-soon">coming soon.</span><span class="autumn-2017">&nbsp;autumn 2017.</span></p> 
 
      </div> 
 
      
 
     </header> 
 
     <section> 
 
      <div> 
 
       <p>If you have a Web Design or Development enquiry,<br>please contact:</p> 
 
       <p class="contact-info"><a href="mailto:[email protected]">[email protected]</a><br><a href="tel:07903490453">+44 (0) 7903 490453</a></p> 
 
      </div> 
 
      
 
     </section> 
 
    </body> 
 
</html>

來源

2017-09-26 GTM1

您可以將您的代碼，以便我們可以看到你已經嘗試了什麼，到目前爲止並在問題是？ – Shogunivar

它可以與Flexbox和正確使用@media查詢和order屬性來實現：

你可以請檢查此JSFiddle以使用瀏覽器大小播放。

footer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
footer p { 
 
    margin: 0 30px; 
 
} 
 

 
@media (max-width: 480px) { 
 
    footer { 
 
    flex-direction: column; 
 
    } 
 
    
 
    footer i{ 
 
    order: 2; 
 
    } 
 
}

<footer> 
 
    <i>icon one</i> 
 
    <p>links</p> 
 
    <i>icon two</i> 
 
</footer>

來源

2017-09-26 09:51:01

你的回答是正確的，但他的情況下，他不會工作，因爲他試圖實現桌面視圖與文本一樣寬屏幕的移動。 –

爲什麼不能這樣工作@PraveenM？ –

看看他提供的鏈接。 https://i.stack.imgur.com/lBtmv.jpg該文本的大小與屏幕大小几乎相同，並且他/她想要在該文件的兩側放置兩個圖像。 –

您可以使用CSS定位屬性

body { 
 
    background-color: #000; 
 
    font-family: 'Roboto Mono', 'Arial', sans-serif; 
 
    font-size: 250%; 
 
    font-weight: 300; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    margin: 50px auto; 
 
} 
 

 

 
p { 
 
    color: #ccc; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 

 
.coming-soon { 
 
    color: #333; 
 
    letter-spacing: 3px; 
 
} 
 

 
.autumn-2017 { 
 
    color: #ccc; 
 
} 
 

 
section p { 
 
    display: block; 
 
    margin: 50px auto 10px; 
 
    font-size: 35%; 
 
    text-transform: none; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #333; 
 
} 
 

 
.contact-info { 
 
    margin: 15px auto; 
 
    letter-spacing: 3px; 
 
    line-height: 25px; 
 
    color: #ccc; 
 
    text-decoration: none; 
 
    text-transform: none; 
 
    font-size: 35%; 
 
} 
 

 
a:link, 
 
a:visited { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    transition: font-weight 0.2s; 
 
} 
 

 
a:hover, 
 
a:active { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    font-weight: 500; 
 
} 
 

 

 
/* NEW CSS */ 
 

 
.footer-container{ 
 
    position:relative; 
 
    padding:0 50px; 
 
    text-align:center; 
 
    max-width:300px; 
 
    margin:0 auto; 
 
} 
 

 
.ico{ 
 
    background-color:#333; 
 
    display:inline-block; 
 
    width:36px; 
 
    height:36px; 
 
    line-height:36px; 
 
    font-size:12px; 
 
    text-align:center; 
 
    border-radius:36px; 
 
    color:#FFF; 
 
    
 
    position:absolute; top:50%; margin-top:-18px; 
 
} 
 

 
.fb{ left:0; } 
 
.tw{ right:0; } 
 

 

 
@media (max-width: 768px) { 
 
    .footer-container{ padding:0; } 
 
    .ico{ position:static; margin-top:0px; } 
 

 
}

<header> 
 
    <div> 
 
     <img src="iz-icon-logo.png" class="logo" alt="logo" /> 
 
     <p> 
 
     <span class="coming-soon">coming soon.</span><span class="autumn-2017">&nbsp;autumn 2017.</span> 
 
     </p> 
 
    </div> 
 
</header> 
 

 
<section> 
 
    <div> 
 
     <p>If you have a Web Design or Development enquiry,<br>please contact:</p> 
 
     <div class="footer-container"> 
 
     <p class="contact-info"> 
 
     <a href="mailto:[email protected]">[email protected]</a><br> 
 
     <a href="tel:07903490453">+44 (0) 7903 490453</a> 
 
     </p> 
 
     <span class="ico fb">Fb</span> 
 
     <span class="ico tw">Tw</span> 
 
     </div> 
 
    </div> 
 
</section>

來源

2017-09-26 10:08:56 Mahmoud

乾杯馬哈茂德，我試過你的代碼，它工作時，我在一個全新的文本文件中，但是當我嘗試合併它與我自己的代碼，圖標不會更改爲42px的較小尺寸，因爲您在css中要求它，並且我無法讓它們顯示在我的文本的每一側。我上面編輯了我的原始文章，上面顯示了我的代碼以及我的網站的實際圖片。如果你能夠進一步提供幫助，這將是愉快的GTM1 – GTM1

。如果我理解正確，則希望在頁腳文本旁邊添加社交網絡的兩個圖標，因爲我在代碼中看不到圖標 – Mahmoud

如何在同一行上放置文本和社交媒體圖標

回答

相關問題