Question

我有两个带标题的字段和一个没有标题的按钮。

如何使按钮与输入字段而不是标题对齐？

.input-x-box {
    float: left;
}
.input-y-box {
    float: left;
}

<div class="input-x-box inline">
    <div class="title">Add New Stuff</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="input-y-box inline">
    <div class="title"> More</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="group-btn inline">
    <button class="btn btn-default green-bg">Add</button>
</div>

Answer 1

如果您使用display: inline-block代替float，则所有项目都会排在最底层，因为默认vertical-align为baseline，告诉浏览器呈现框的基线与父框的基线对齐。

当您想要在项目周围流动某些内容时，您应该只使用浮动内容，例如段落中的图像。

.inline {
    display: inline-block;
}

<div class="input-x-box inline">
    <div class="title">Add New Stuff</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="input-y-box inline">
    <div class="title"> More</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="group-btn inline">
    <button class="btn btn-default green-bg">Add</button>
</div>

将按钮与没有标题的输入字段对齐

1 个答案: