如何通過html或css水平顯示鏈接的圖像

我試圖創建一個示例網站，我試圖水平顯示社交媒體而不是垂直...有無論如何，我可以通過我的代碼我在這裏？如何通過html或css水平顯示鏈接的圖像

我能想象包含文件，如果你要我，但我不知道怎麼做，通過堆棧

.fill-screen { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    text-align: center; 
 
} 
 

 
.make-it-fit { 
 
    max-width: 99%; 
 
    max-height: 99%; 
 
} 
 

 

 
@font-face { 
 
    font-family: 'Poppins', sans-serif; 
 
    font-family: 'Josefin Slab', serif; 
 
} 
 

 
body { 
 
    background-color: #f9f9f9; 
 
} 
 

 
fieldset { 
 
    margin-top: 1em; 
 
    margin-bottom: 1em; 
 
    padding: .5em; 
 
} 
 
legend { 
 
    color: blue; 
 
    font-weight: bold; 
 
    font-size: 85%; 
 
    margin-bottom: .5em; 
 
} 
 
label { 
 
    float: left; 
 
    width: 90px; 
 
} 
 
input, select { 
 
    margin-left: 1em; 
 
    margin-right: 1em; 
 
    margin-bottom: .5em; 
 
} 
 
input { 
 
    width: 14em; \t 
 
} 
 
input[type="radio"], input[type="checkbox"] { 
 
    width: 1em; 
 
    padding-left: 0; 
 
    margin-right: 0.5em; 
 
}

<!DOCTYPE html> 
 
<!--bakhriddinov--> 
 
<!-- --> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>Final Project</title> 
 
     <script src="index.js"></script> 
 
     <link href="index.css" rel="stylesheet" type="text/css" /> 
 
     
 
     <!--font--> 
 
     <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> 
 
     
 
     <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"> 
 
     
 
    </head> 
 
    <body> 
 
     <!--significant element 1 DIV--> 
 
    \t <div class='fill-screen' style = "overflow: auto; max-height: 100vh;"> 
 
      <h2><a id="top"></a></h2> 
 
      <img src="takethejourney.png" alt="next" height="70"/> 
 
      
 
      <br> 
 
      
 
     <!--significant element 2 IMAGES--> 
 
      <a href="index2.html"> 
 
      <img src="savetheb.gif" alt="MAIN" height="400"/> 
 
      </a> 
 
      <br> 
 
      <br> 
 
      
 
     <!--significant element 4 LINKS TO OTHER INNER HTML--> 
 
      <a href=""> \t 
 
      <img class='make-it-fit' 
 
     \t src=''> 
 
      </a> 
 
      
 
      
 
     <!-- social medias -->  
 
      <p></p> 
 
      
 
     <!--significant element 4 LINKS TO OTHER OUTER HTML--> 
 
      <a href="https://www.facebook.com/greenpeace.international?fref=ts"> 
 
       <img src="64x64facebook.png" alt="greenpeace's facebook" height="20" width="20"/> 
 
      </a>  
 
      
 
      <p></p> 
 
      
 
      <a href="https://twitter.com/Greenpeace"> 
 
       <img src="64x64twitter.png" alt="greenpeace's twitter" height="20" width="20"/> 
 
      </a> 
 
      
 
      <p></p> 
 
      
 
      <a href="https://www.youtube.com/user/GreenpeaceVideo"> 
 
       <img src="64x64youtube.png" alt="greenpeace's youtube" height="20" width="20"/> 
 
      </a> 
 
      
 
      <p></p> 
 
      
 
      <a href="http://www.greenpeace.org/"> 
 
       <img src="greenpeace_logo.png" alt="greenpeace" height="20"/> 
 
      </a> 
 
      
 
      <p></p> 
 
\t \t \t </div> 
 
    </body> 
 
</html>

謝謝

來源

2017-03-16 steven

檢查自舉網格，或一般的網格，它是像div class = col-xs-4 .... –

只是一個提示。下一次您想使用圖像時，請嘗試使用一些佔位符，而不是原始代碼，因爲它們最終無效。請嘗試https://placehold.it/ –

的最簡單方法獲取圖像並排顯示而不會改變太多，只需簡單地將它們包裝在一個容器<div>中。它甚至不需要任何造型！

.fill-screen { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    text-align: center; 
 
} 
 

 
.make-it-fit { 
 
    max-width: 99%; 
 
    max-height: 99%; 
 
} 
 

 
@font-face { 
 
    font-family: 'Poppins', sans-serif; 
 
    font-family: 'Josefin Slab', serif; 
 
} 
 

 
body { 
 
    background-color: #f9f9f9; 
 
} 
 

 
fieldset { 
 
    margin-top: 1em; 
 
    margin-bottom: 1em; 
 
    padding: .5em; 
 
} 
 

 
legend { 
 
    color: blue; 
 
    font-weight: bold; 
 
    font-size: 85%; 
 
    margin-bottom: .5em; 
 
} 
 

 
label { 
 
    float: left; 
 
    width: 90px; 
 
} 
 

 
input, 
 
select { 
 
    margin-left: 1em; 
 
    margin-right: 1em; 
 
    margin-bottom: .5em; 
 
} 
 

 
input { 
 
    width: 14em; 
 
} 
 

 
input[type="radio"], 
 
input[type="checkbox"] { 
 
    width: 1em; 
 
    padding-left: 0; 
 
    margin-right: 0.5em; 
 
}

<body> 
 
    <!--significant element 1 DIV--> 
 
    <div class='fill-screen' style="overflow: auto; max-height: 100vh;"> 
 
    <h2> 
 
     <a id="top"></a> 
 
    </h2> 
 
    <img src="takethejourney.png" alt="next" height="70" /> 
 

 
    <br> 
 

 
    <!--significant element 2 IMAGES--> 
 
    <a href="index2.html"> 
 
     <img src="savetheb.gif" alt="MAIN" height="400" /> 
 
    </a> 
 
    <br> 
 
    <br> 
 

 
    <!--significant element 4 LINKS TO OTHER INNER HTML--> 
 
    <a href=""> 
 
     <img class='make-it-fit' src=''> 
 
    </a> 
 

 

 
    <!-- social medias --> 
 
    <div> 
 

 
     <!--significant element 4 LINKS TO OTHER OUTER HTML--> 
 
     <a href="https://www.facebook.com/greenpeace.international?fref=ts"> 
 
     <img src="http://placehold.it/100" alt="greenpeace's facebook" height="20" width="20" /> 
 
     </a> 
 

 
     <a href="https://twitter.com/Greenpeace"> 
 
     <img src="http://placehold.it/100" alt="greenpeace's twitter" height="20" width="20" /> 
 
     </a> 
 

 
     <a href="https://www.youtube.com/user/GreenpeaceVideo"> 
 
     <img src="http://placehold.it/100" alt="greenpeace's youtube" height="20" width="20" /> 
 
     </a> 
 

 
     <a href="http://www.greenpeace.org/"> 
 
     <img src="http://placehold.it/100" alt="greenpeace" height="20" /> 
 
     </a> 
 

 
    </div>

一個DIV是block元件，因此將佔據默認父的寬度的100％。圖像是inline-block，所以在block元素內部時，將嘗試顯示彼此相鄰。

希望這會有所幫助！ :)

來源

2017-03-16 03:10:03

，它非常感謝... s.s.s.s.s。 – steven

如何通過html或css水平顯示鏈接的圖像

回答

相關問題