我有以下 div 和按鈕<div class="sc-fzqBZW fNBJAV"> <button class="sc-fzokOt eEeKDq">Cancel</button> <button class="sc-fzokOt eEeKDq">Continue</button></div>div的css如下box-sizing: "border-box"對于按鈕來說是width: "50%";padding: "10px";margin: "5px";但是，由于添加了邊距，按鈕會中斷到下一行。我認為 border-box 可以解決這個問題，但我不知道為什么不能。我在這里缺少什么？
1 回答
慕碼人2483693
TA貢獻1860條經驗 獲得超9個贊
參見MDN：
border-box 告訴瀏覽器考慮您為元素的寬度和高度指定的值中的任何邊框和填充。如果將元素的寬度設置為 100 像素，則這 100 像素將包括您添加的任何邊框或填充，并且內容框將縮小以吸收額外的寬度。這通常使得調整元素大小變得更加容易。
它不會在框內放置邊距。
請考慮使用彈性盒。
div {
display: flex;
}
button {
flex: 1 1 auto;
margin: 5px;
}
<div>
<button>Cancel</button>
<button>Continue</button>
</div>
- 1 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消