Question

我试图将两个组件放在同一行上并像这样包装它。我试图尽可能保持这种可重用性，所以我试图尽可能地解决这个问题。

HTML：

<div class="form-group">
    <span class="component-parent">
        <label for="driversLicense.num">Driver's License #</label>
        <input type="text" class="form-control" id="driversLicense.num"></input>
    </span>
    <span class="component-parent">
        <label for="driversLicense.state">State</label>
         <select id="driversLicense.state" class="form-control"></select>
    </span>
</div>

CSS：

label {
    display: block;
}
.component-parent {
    display: inline-block;
}
.form-control {
    width: 100%;
    padding: 6px 12px;
}

宽度：100％是从Bootstrap继承的，如果我删除它会导致我的其余布局出现各种问题。

问题是input位于select下面，我希望它们之间有一点空间。如果我删除了width: 100%，那么它看起来是正确的，如果我删除了我的填充，那么两个组件之间没有空格，但我的插入点位于错误的位置。

这是显示现象的fiddle。

有没有办法改变解决这个问题的form-group的CSS？如果需要，我可以添加一个额外的容器，但我不想更改任何component-parent元素或其子元素的CSS或html。

Answer 1

这是您应用于选择的填充的问题！我添加了

box-sizing:border-box;

解决了这个问题，然而你需要浮动跨度以消除差距！

如果您有其他问题，请告诉我！ :)一切顺利！

样本 http://jsfiddle.net/graHw/6/

Answer 2

我最终在两个span元素之间添加了一个新的component-parent。跨度的margin-left等于水平填充。

这是新的fiddle

跨度不随儿童规模增长

2 个答案: