Question

我需要2行按钮，第1行我会有3个按钮，第2行会有5个按钮。我希望它们很好地对齐，以便row1-＆gt; button1的边缘与row2-＆gt; button1在同一水平点，与行和右边缘中的最后一个按钮相同。

我可能误解了有关css / html的内容，但我完全不知道为什么每行中的按钮都会转到下一行：

<div class="footer">
    <div class="buttonsRow">
        <div class="button-wrapper" style="width: 33.3%">
            <button>1.1</button>
        </div>
        <div class="button-wrapper" style="width: 33.3%">
            <button>1.2</button>
        </div>
        <div class="button-wrapper" style="width: 33.3%">
            <button>1.3</button>
        </div>
    </div>
    <div class="buttonsRow">
        <div class="button-wrapper" style="width: 20%">
            <button>2.1</button>
        </div>
        <div class="button-wrapper" style="width: 20%">
            <button>2.2</button>
        </div>
        <div class="button-wrapper" style="width: 20%">
            <button>2.3</button>
        </div>
        <div class="button-wrapper" style="width: 20%">
            <button>2.4</button>
        </div>
        <div class="button-wrapper" style="width: 20%">
            <button>2.5</button>
        </div>
    </div>
</div>

CSS：

.footer{
    width: 100%;
    height: 75px;
    background-color: #66CCFF;
    margin: 0;
    padding: 0;
}

.buttonsRow{
    height: 50%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.button-wrapper{
    display: inline-block;
    margin: 0;
    padding: 0;
}

button{
    height: 33px;
    width: 100%;
    margin: 2px;
}

当我在Firefox中检查时，第一个.buttonsRow的宽度为701px（没有填充，边框或边距），内部的3.button-wrappers中的每一个都是233px宽（同样，没有填充边框或边距）。
现在我在学校学到的数学告诉我：3 * 233 = 699.699＆lt; 701.
这不意味着它会适合排吗？那为什么不呢？
这是jsfiddle btw：jsfiddle

Answer 1

因为内联元素对空白区域敏感。像这样删除它：

<强> jsFiddle example

<div class="footer">
    <div class="buttonsRow">
        <div class="button-wrapper" style="width: 33.3%">
            <button>1.1</button>
        </div><div class="button-wrapper" style="width: 33.3%">
            <button>1.2</button>
        </div><div class="button-wrapper" style="width: 33.3%">
            <button>1.3</button>
        </div>
    </div>
    <div class="buttonsRow">
        <div class="button-wrapper" style="width: 20%">
            <button>2.1</button>
        </div><div class="button-wrapper" style="width: 20%">
            <button>2.2</button>
        </div><div class="button-wrapper" style="width: 20%">
            <button>2.3</button>
        </div><div class="button-wrapper" style="width: 20%">
            <button>2.4</button>
        </div><div class="button-wrapper" style="width: 20%">
            <button>2.5</button>
        </div>
    </div>
</div>

或者，将按钮包装器向左浮动：

<强> jsFiddle example

在css中对齐两行按钮

1 个答案: