跨度各地按钮导致问题

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>