跨度不随儿童尺寸增长答案

【问题标题】：Span not growing with child size跨度不随儿童尺寸增长
【发布时间】：2013-09-26 03:19:23
【问题描述】：

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

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。

【问题讨论】：

标签： html css angularjs

【解决方案1】：

您对选择应用的填充有问题！我加了

box-sizing:border-box;

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

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

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

【讨论】：

这个答案给了我更多的谷歌术语，所以我赞成投票，但它改变了组件父元素之一的 css。
很高兴它可能有一些用处，我会试着想一个没有用的解决方案！ :)

【解决方案2】：

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

这是新的fiddle

【讨论】：