0

我试图将两个组件放在同一行并像这样包装它。我试图保持它尽可能可重用，因此我试图获得尽可能通用的解决方案。

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;
}

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

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

这是一个显示现象的小提琴。

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

4

2 回答 2

1

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

box-sizing:border-box;

这解决了这个问题，但是您需要浮动跨度以清除间隙！

如果您还有其他问题，请告诉我！：） 一切顺利！

演示 http://jsfiddle.net/graHw/6/

于 2013-09-24T19:09:44.853 回答
0

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

这是新的小提琴

于 2013-09-25T19:19:23.787 回答