跨度各地按鈕導致問題

Question

我有一個跨度圍繞一個按鈕，出於某種原因，文本/按鈕，我做不延伸容器的整個寬度，使其全部在一行。我試圖設置寬度爲100％like-links-button以及鏈接本身。似乎沒有任何工作。它在代碼片段中工作，但不在我的實際頁面上。任何想法爲什麼不呢？

#like-links a { 
 
\t font-size: 1.2em; 
 
\t text-decoration: none; 
 
\t width: 100%; 
 
} 
 
#like-links-button { 
 
\t padding: 15px 20px; 
 
\t border: 2px solid #000; 
 
\t -webkit-transition: ease-in-out .5s; 
 
\t transition: ease-in-out .5s; 
 
\t color: #000; 
 
}

\t \t \t \t <div id="like-links"><a href="discuss-project"><span id="like-links-button">DISCUSS DESIGN PROJECT</span></a></div>

Answer 1

加入display: inline-block到您的跨度使得它看起來正確的我。

Answer 2

您需要給block formating context（基本上用於處理浮動元素）通過display您的範圍。其defaut display是inline，因此，它不會採取垂直padding或margin如你所願。

#like-links a { 
 
\t font-size: 1.2em; 
 
\t text-decoration: none; 
 
\t width: 100%; 
 
} 
 
#like-links-button { 
 
\t padding: 15px 20px; 
 
\t border: 2px solid #000; 
 
\t -webkit-transition: ease-in-out .5s; 
 
\t transition: ease-in-out .5s; 
 
\t color: #000; 
 
    display:inline-block;/* make me behave like a box */ 
 
}

<div id="like-links"><a href="discuss-project"><span id="like-links-button">DISCUSS DESIGN PROJECT</span></a></div>