Question

我在display: inline-block

的div中包装了一个标准的bootstrap选择框和按钮

这使得显示的选择框正好比按钮高2个像素。我试图调试以找到哪个css属性使这种情况发生，但无法弄明白。

如果我在包含select的div上添加vertical-align: -2px;，则元素会对齐。我只是不明白为什么我需要这个，以及为什么它们首先是不同的对齐方式。如果有人能帮助我更好地理解这一点，我将非常感激。

HTML：

<div class="row">
  <div class="col-xs-12">
    <div id="select-container" class="inline">
      <select class="form-control" id="info-template-select">
                                                    <option selected="true" disabled="disabled" value="-1">Select something</option>
                                                </select>
    </div>
    <div class="inline"><button class="btn btn-info" id="btn-first-next">Next</button></div>
  </div>
</div>

CSS：

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.inline{
  display: inline-block;
}

/*
#select-container{
  vertical-align: -2px;
}

*/

Answer 1

使用float: left;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
}

.inline{
    float: left;
}

button{
    border: 0;
}

/*
#select-container{
  vertical-align: -2px;
}

*/

<div class="row">
    <div class="col-xs-12">
        <div id="select-container" class="inline">
            <select class="form-control" id="info-template-select">
                <option selected="true" disabled="disabled" value="-1">Select something</option>
            </select>
        </div>
        <div class="inline"><button class="btn btn-info" id="btn-first-next">Next</button></div>
    </div>
</div>

为什么有2px垂直对齐差异引导选择和按钮？

1 个答案: