文字移至下一行，沒有寬度問題

Question

我對自己遇到的問題完全感到困惑。 這是最簡單的問題，但我找不到該問題。 我有一排帶有邊框的文本行作為按鈕。 我在其中增加了文本，此后每當視口低於1200px時，文本的一半就會跳到下一行。

我創建了一個片段來復制它，但是即使那樣也無濟於事，因此很可能必須實時查看它。 問題所在的區域位於該部分最底部的“與我們一起發展您的業務”部分（在3張圖片下方）。

請在小於1200像素的視口中查看

是什么原因導致自制按鈕出現在2行上？ 我的寬度設置為100％嗎？

 $(function() { $('#see-all-services-text').animate({ opacity: 1, left: '0%' }, 700); }) 

 #home-img-block-section { width: 100%; height: 850px; } #see-all-services { width: 100%; height: 75px; text-align: center; } #see-all-services-text { opacity: 0; font-size: 1.3em; position: relative; left: -30%; } #see-all-services-text a { text-decoration: none; color: #45a5ba; cursor: pointer; } #see-all-services-button { padding: 15px 20px; border: 2px solid #45a5ba; transition: ease-in-out .5s; } #see-all-services-button:hover { border: 2px solid #45a5ba; color: #FFF; background: #45a5ba; transition: ease-in-out .5s; } /*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/ @media screen and (min-width: 961px) and (max-width: 1200px) { #home-img-block-section { height: 670px; } #see-all-services-text { font-size: 1.2em; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="home-img-block-section"> <div id="see-all-services"> <div id="see-all-services-text"><a href="services"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></a></div> </div> </div> 

Answer 1

這是因為您的按鈕是inline元素。 設置display:inline-block; 去除width:100%; ，並且一切正常。

您的摘要：

 $(function() { $('#see-all-services-text').animate({ opacity: 1, left: '0%' }, 700); }) 

 #home-img-block-section { width: 100%; height: 850px; } #see-all-services { width: 100%; height: 75px; text-align: center; } #see-all-services-text { opacity: 0; font-size: 1.3em; position: relative; left: -30%; } #see-all-services-text a { text-decoration: none; color: #45a5ba; cursor: pointer; } #see-all-services-button { padding: 15px 20px; display: inline-block; border: 2px solid #45a5ba; transition: ease-in-out .5s; } #see-all-services-button:hover { border: 2px solid #45a5ba; color: #FFF; background: #45a5ba; transition: ease-in-out .5s; } /*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/ @media screen and (min-width: 961px) and (max-width: 1200px) { #home-img-block-section { height: 670px; } #see-all-services-text { font-size: 1.2em; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="home-img-block-section"> <div id="see-all-services"> <div id="see-all-services-text"><a href="services"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></a></div> </div> </div>