嗨呀，
就像標題所說的那樣，我偶然發現了一個問題，當一個按鈕的內容多于另一個時，我無法獲得兩個行內居中的按鈕。
首先，這是它目前的樣子：
正如我們所看到的，按鈕在文本的正上方和下方的角度看起來還不錯，但是由于黑色按鈕有更多的文本，因此在影像的角度看起來不合適。
代碼如下（專案使用的是古老的v2 Bootstrap）：
<div class="row-fluid visible-desktop">
<div class="span6" style="text-align: right;">
<a href="#"><button type="button" class="btn btn-default">Ja, tack!</button></a>
</div>
<div class="span6" style="text-align: left;">
<a href="#"><button type="button" class="btn btn-inverse">Nej tack, avsluta</button></a>
</div>
</div>
提議的解決方案是為按鈕設定統一的寬度（例如 200 像素），雖然它在技術上作為 B 計劃作業，但我們想首先考慮其他可能性。另一種解決方案是簡單地不將按鈕行內，但是對于這樣的事情（至少在我的意見/思考程序中），這種設計更改不應該是必要的。
We have also experimented with the "hack" of shifting the buttons to the left using margin-properties, but since we allow our clients/customers to change the text at their own discretion, this would not be viable either.
Thankful for any and all help/pointers!
uj5u.com熱心網友回復：
檢查代碼，無論按鈕寬度如何，它都將位于中心
.span6 {
display: inline-block;
}
.visible-desktop {
width: max-content;
margin: auto;
}<div class="row-fluid visible-desktop">
<div class="span6">
<a href="#"><button type="button" class="btn btn-default">Ja, tack!</button></a>
</div>
<div class="span6">
<a href="#"><button type="button" class="btn btn-inverse">Nej tack, avsluta</button></a>
</div>
</div>uj5u.com熱心網友回復：
我會考慮使用網格布局，以便它可以考慮不同長度的文本。然而，從 UI / UX 的角度來看，在這種情況下，相同的按鈕大小會更好看。
.wrapper {
width: 500px;
background: #ebebeb;
border: 1px solid #d9d9d9;
border-radius: 5px;
padding:10px;
text-align: center;
}
.button-wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
row-gap: 1.5rem;
column-gap: 1rem;
}
button {
box-sizing: border-box;
border-radius: 5px;
padding:5px;
grid-column: span 3 / span 3;
}
.button1 {
background: blue;
color: white;
}
.button2 {
background: black;
color: white;
}<div class="wrapper">
<p> Some text some text some text </p>
<p> Some text some text some text </p>
<div class="button-wrapper">
<button class="button1"> Ja, Tack! </button>
<button class="button2"> New tack, avsluta </button>
</div>
</div>uj5u.com熱心網友回復：
像這樣的東西應該可以作業，使它成為一個 div 而不是兩個。
<div class="row-fluid visible-desktop">
<div class="span12" style="text-align: center;">
<a href="#"><button type="button" class="btn btn-default">Ja, tack!</button></a>
<a href="#"><button type="button" class="btn btn-inverse">Nej tack, avsluta</button></a>
</div>
</div>
也許用一些邊距修復按鈕之間的間隙，或者用有一些填充的 div 包裹兩個按鈕。
不過，肯定有更好的方法來做到這一點（沒有引導程式）:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339161.html
上一篇：如何使用引導程式偏移下劃線？
下一篇：CSS圓翹曲不平滑/圓形