Question

我的标记是这样的

<div class='button-group'>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

如果父容器（.button-group）具有css： width：100％;
那么如何证明按钮是合理的，这样它每个按钮的宽度会自动增加33.33％，如果有4个按钮则需要25％等等...
如何使用css实现这一目标？

尝试：JSFiddle

Answer 1

您可以尝试使用table。它不是那么棘手，看一看：

的 HTML：

<table class="button-group"> <tr> <td><button class="bt">1</button></td> <td><button class="bt">2</button></td> <td><button class="bt">3</button></td> </tr> </table>

<强> CSS：

table.button-group { width: 100%; border: 0; border-collapse: collapse; } table.button-group td { margin: 0; padding: 0; } .bt { width: 100%; }

想在JSFiddle上看一个例子吗？ Click here

的

<强>更新

如果您不想使用表格，则可以将table标记替换为div标记为display: table;且标记为td的标记div display: table-cell;具有tr

在这种情况下，{{1}}不是必需的

JSFiddle HERE

对不起，如果我的英语不好......

Answer 2

更新：

要保持HTML不变，最好的方法是使用display: flex（当然它在旧浏览器中无法使用）：http://codepen.io/pageaffairs/pen/GLIhc

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.button-group {display: flex;}
button {flex: 1 100%;}

</style>
</head>
<body>

<div class="button-group">
    <button>1</button>
    <button>2</button>
    <button>3</button>
</div>

</body>
</html>

如果您愿意添加更多标记，可以这样做：http://codepen.io/pageaffairs/pen/wznGK

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.button-group {display: table; table-layout: fixed; width: 100%;}
.button-group div {display: table-cell;}
button {width: 100%;}

</style>
</head>
<body>

<div class="button-group">
    <div>
        <button>1</button>
    </div>
    <div>
        <button>2</button>
    </div>
    <div>
        <button>3</button>
    </div>
</div>

</body>
</html>

Answer 3

只需在.btn中包含一系列.btn-group.btn-group-justified。

<强> Demo

HTML

2 buttons
<br>
<div class="group justified">
    <div class="group">
        <button type="button" class="btn default">1</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">2</button>
    </div>
</div>
<br>3 buttons
<br>
<div class="group justified">
    <div class="group">
        <button type="button" class="btn default">1</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">2</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">3</button>
    </div>
</div>
<br>

CSS

.justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.justified>.btn, .justified>.group {
    display: table-cell;
    float: none;
    width: 1%;
}

.justified>.group .btn {
    width: 100%;
}

.group>.btn {
    position: relative;
    float: left;
}
.default {
    color: #333;
    background-color: #ccc;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
}

在100％宽度容器内对齐按钮的宽度

3 个答案:

<强>更新

JSFiddle HERE