如何讓按鈕留在同一個盒子？

我創建了一個按鈕，但是每當我讓窗口變小時，按鈕就不在我的盒子裏。它看起來不太好。我想知道如何讓我的按鈕留在箱子裏。看圖片有更好的理解。我提供了我的按鈕的CSS。我不知道如何實現這個問題的一個好的和有效的解決方案。我能夠通過將寬度更改爲100％來解決我的問題。現在我的信已經從我的信件中刪除了。請看照片！如何讓按鈕留在同一個盒子？

.button { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t cursor: pointer; 
 
\t outline: none; 
 
\t white-space: nowrap; 
 
// \t margin: 5px; 
 
\t padding: 0 22px; 
 
\t font-size: 14px; 
 
\t font-family: 'Roboto', sans-serif, 'Lato'; 
 
\t height: 40px; 
 
    width: 220px; 
 
\t line-height: 40px; 
 
\t background-color: #428bca; 
 
\t color: #FFF; 
 
\t font-weight: 600; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t border: none; 
 
\t text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 
 
    margin: 0 auto; 
 
    text-align: center; 
 

 
} 
 
.panel-title { 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    font-size: 16px; 
 
    color: #ffffff; 
 
} 
 

 
.panel-heading { 
 

 
    color: #428bca; 
 
    background-color: #428bca; 
 
    border-top: 1px solid #dddddd; 
 
    \t border-left: 1px solid #dddddd; 
 
    border-right: 1px solid #dddddd; 
 
    //border-top-right-radius: 3px; 
 
    //border-top-left-radius: 3px; 
 
} 
 

 
.panel-body { 
 
    padding: 15px; 
 
    border: 1px solid #dddddd; 
 
} 
 
.nobottommargin { 
 
    margin-bottom: 0 !important; 
 
} 
 
.leftmargin-sm { 
 
    margin-left: 30px !important; 
 
} 
 

 
.button.button-rounded { 
 
\t border-radius: 3px; 
 
} 
 

 
.button.button-reveal { 
 
\t padding: 0 28px; 
 
\t overflow: hidden; 
 
} 
 

 
.button.button-large { 
 
\t padding: 0 26px; 
 
\t font-size: 16px; 
 
\t height: 46px; 
 
\t line-height: 46px; 
 
} 
 

 
.button-teal { 
 
\t background-color: #428bca; 
 
} 
 

 
/*code for the icon */ 
 
.button-reveal i { 
 
    position: absolute; 
 
    width: 2em; 
 
    height: 100%; 
 
    line-height: 45px; 
 
    background-color: rgba(0, 0, 0, .2); 
 
    text-align: center; 
 
    left: -100%; 
 
    transition: left 0.25s ease; 
 
} 
 
.button-reveal:hover i { 
 
    left: 0; 
 
} 
 
/* code for the letters*/ 
 
.button-reveal span { 
 
    display: inline-block; 
 
    margin: 0 2em; 
 
    transition: margin 0.35s ease; 
 
} 
 
.button-reveal:hover span { 
 
    margin: 0 1em 0 3em; 
 
}

<div class="panel-heading"> 
 
\t \t \t \t \t \t \t \t <h2 class="panel-title">Access This Service</h2> 
 
\t \t \t \t \t \t \t </div> 
 

 
<div class="panel-body"> 
 
    <!-- angular --> 
 
    \t \t 
 
    <div ng-if="c.html" ng-bind-html="c.html"></div> 
 

 
<a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i> 
 
    <span>Go there now!</span></a><br> 
 

 
Note: If you haven’t accessed Zoom before, create a new account at <a href="http://zoom.us">zoom.us</a>. 
 
</div>

來源

2017-10-12 crucl

你可以添加你的css嗎？ – 2017-10-12 20:16:29

嘗試添加style ='width：100％;'到按鈕 –

需要看到相關的html和css，這應該是問題的一部分。這樣人們可以重現你的例子。 –

.button { 
    box-sizing: border-box; /* Include padding within the button's width */ 
    width: 100%; /* Made the button the full width of its parent */ 
    padding: 0 22px; /* Add 22 pixels of padding to the left and right of the button */ 
}

你可能不需要填充，所以你可以只是做：

button { 
    width: 100%; 
    padding: 0; 
}

來源

2017-10-12 20:21:30 MrCarrot

謝謝！爲什麼它是100％？另一個快速問題填充0 20px是做什麼的？再次感謝！ – crucl

它會添加填充按鈕的左側和右側 –

是的，這是有道理的。我現在面臨的問題是，只要我縮小窗口，我的信件「現在就去」正在被切斷。 – crucl

填充將文本推向右側，'white-space：nowrap'阻止文本換行到第二行。當您將div縮小時，您的文字太寬了，所以它必須放在某個地方。如果允許它包裹，當寬度太窄時它將佔用兩行。設置'min-height'而不是'height'，這樣按鈕就可以展開。

button { 
    width: 100%; 
    padding: 0 5px; 
    //height: 40px; 
    min-height: 40px; 
    white-space: normal; 

}

來源

2017-10-12 20:45:53

我試過，但它仍然切斷了字母。 – crucl

如果你可以發佈HTML，那將會更容易幫助你。否則我無法測試我的解決方案。 –

我剛添加了html – crucl

如何讓按鈕留在同一個盒子？

回答

相關問題