我該如何解決這種造型問題？

-1

我有這段代碼，我聽說hspace將不再被使用。我怎樣才能在他們之間，以上和10px之間添加空間是好的，我嘗試使用margin-top沒有工作，並打破了我的其他小部件。我該如何解決這種造型問題？

下面是一個例子：

Here the code does not have space between them on vertical

This is the wide view here it looks better, once resized into smaller screens I get the above result

我想有10px的beween他們，當在上面過調整。我希望它們都在一次代碼中，因爲這是一個我想要的內置CSS的小部件。

<div align="center"> 
 
    <a href="https://facebook.com/testclue"> 
 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" align="middle" alt="TestClue on Facebook" height="60" width="60" hspace="10"> 
 
    </a> 
 
    <a href="https://twitter.com/testclue"> 
 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" align="middle" alt="TestClue on Twitter" height="60" width="60" hspace="10"> 
 
    </a> 
 
    <a href="https://www.linkedin.com/company/testclue"> 
 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" align="middle" alt="TestClue on LinkedIN" height="60" width="60" hspace="10"> 
 
    </a> 
 
    <a href="https://plus.google.com/+Testclue"> 
 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" align="middle" alt="TestClue on Google+" height="60" width="60" hspace="10"> 
 
    </a> 
 
</div>

來源

2016-04-14 Uhl Hosting

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

...和'align'已被棄用，不應再使用。 –

我試着用margin-top = 10px，但它毀了我所有的代碼。我也用margin = 10px替換了hspace –

我竟被d建議刪除標籤上的所有內聯代碼，因爲其中一些代碼已被棄用或不如CSS有用。

我建議你做這樣的事情。

對於HTML：

<div id="social-networks-container"> 
    <div class="social-network"> 
    <a href="https://facebook.com/testclue"> 
     <img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" /> 
    </a> 
    </div> 
    <div class="social-network"> 
    <a href="https://twitter.com/testclue"> 
     <img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" /> 
    </a> 
    </div> 
    <div class="social-network"> 
    <a href="https://www.linkedin.com/company/testclue"> 
     <img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" /> 
    </a> 
    </div> 
    <div class="social-network"> 
    <a href="https://plus.google.com/+Testclue"> 
     <img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" /> 
    </a> 
    </div> 
</div>

而對於CSS：

#social-networks-container .social-network { 
    display: inline-block; 
    margin: 10px; 
} 
#social-networks-container .social-network a { 
    display: block; 
}

這個工作的一個例子：https://jsfiddle.net/vfvhqvzf/1/

UPDATE：

如果你只是想使用內嵌代碼在你的HTML你也可以試試這個：

<div style="display:inline-flex;"> 
    <a href="https://facebook.com/testclue" style="display: block;padding: 10px;"> 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" /> 
    </a> 
    <a href="https://twitter.com/testclue" style="display: block;padding: 10px;"> 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" /> 
    </a> 
    <a href="https://www.linkedin.com/company/testclue" style="display: block;padding: 10px;"> 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" /> 
    </a> 
    <a href="https://plus.google.com/+Testclue" style="display: block;padding: 10px;"> 
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" /> 
    </a> 
</div>

演示：https://jsfiddle.net/vfvhqvzf/4/

來源

2016-04-14 13:33:40 Tyd

也許你可以試試這個：

padding: 10px;

來源

2016-04-14 12:38:17 TLR

它工作正常，直到這個調整點：http://prntscr.com/as4y9u –

地址：

style="padding-top:10px;"

每個 'A'（錨）元素

來源

2016-04-14 12:41:55 SPlatten

我該如何解決這種造型問題？

回答

相關問題