如何僅使用CSS使div的組寬度相同？

我有一組按鈕（div），我希望在邏輯組內的所有按鈕的長度相同。如何僅使用CSS使div的組寬度相同？

我可以簡單地爲按鈕的CSS樣式做一個min-length，但是一些按鈕組很短，而其他按鈕組很短。這使得統一的min-length不足以適應長時間羣體或浪費/愚蠢尋找短羣體。此外，多個組（短和長）可以出現在同一屏幕上。

Example of Button Layouts

（這些div都鋪有display: inline-block，所以這就是爲什麼他們不填充容器的寬度）

我認爲這幾個討厭的解決方案，但沒有是優選的：

爲每個組設置
使用JavaScript調整按鈕的特定min-length

我想知道是否有一個通用的，純粹的CSS解決方案來解決上述問題而不是使用這些方法。感謝您的任何幫助，您可以提供。

編輯：這裏是標記和CSS到目前爲止，我已經得到了。很簡單：

HTML：

<div class="wrapper"> 
    <div class="button">Lorem ipsum</div> 
    <div class="button">Lorem ipsum dolar</div> 
    <div class="button">Lorem</div> 
</div>

CSS：

div.button { display: inline-block; min-width: 50px; }

來源

2014-12-02 DOOManiac

，你可以分享你的標記寬度和CSS，你這些div正在使用請 – 2014-12-02 17:09:50

裹在所需寬度的div容器類似的按鈕，並設置內部件的div到：

box-sizing: border-box; 
width: 100%;

這將允許您在一個位置編輯邏輯分組的寬度。

來源

2014-12-02 17:12:20

手動指定每個組的寬度是我想要避免的事情之一（參見＃1子彈）。 – DOOManiac 2014-12-02 17:23:10

如果我正確理解你，你會想要以同樣的方式將它們包裝在容器中，而無需在該div上定義最小寬度。然後對於內部div，你仍然可以將它們設置爲： 'box-sizing：border-box; width：100％;' 容器div將從它的子div的最大寬度繼承它的寬度，其餘的將擴展到繼承的寬度。 – 2014-12-02 17:35:11

經過雙重檢查我的工作後，我發現了一個錯誤。這個解決方案有訣竅！謝謝！ – DOOManiac 2014-12-02 17:42:40

使用最小寬度和最大寬度：

div{/*use the selector what you're using*/ 
    min-width: 150px; 
    max-width: 350px; 
    width: auto; 
    display: inline-block; 
}

如果你想獲得一個統一的寬度，那麼你必須定義一個類名和樣式是這樣的：

.width1{ 
    width: 200px; 
} 

.width2{ 
    width: 300px; 
}

來源

2014-12-02 17:09:18

這沒有任何東西來對齊小於最大寬度的按鈕...例如：200px和250px。 – DOOManiac 2014-12-02 17:29:13

只有這樣你才能做到。這使得較小的div不會更大的div。 – 2014-12-02 17:30:40

檢查更新的答案。 – 2014-12-02 17:32:34

將它們都包裝在一個容器中。

<div class="group"> 
    <div class="button">Hi</div> 
    <div class="button">Wassup</div> 
    <div class="button">Yo</div> 
</div>

然後應用CSS是這樣的：

display:inline-block; 
    min-width: 100%;

，然後設置格「組」是組你想

來源

2014-12-02 17:23:31 marto

這只是將按鈕設置爲容器的100％寬度（本身爲100％，因爲它只是「display：block」）。所以短按鈕最終會浪費大量空間並在整個頁面上展開...... – DOOManiac 2014-12-02 17:27:04

如何僅使用CSS使div的組寬度相同？

回答

相關問題