0

2 つのコンポーネントを同じ行に配置しようとしていて、このようにラップしました。これをできるだけ再利用できるようにしようとしているので、できるだけ一般的な解決策を得ようとしています。

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%と正しいように見え、パディングを削除すると、2 つのコンポーネントがその間にスペースがなく接触しますが、挿入ポイントが間違った場所にあります。

これが現象を示すフィドルです。

form-groupこの問題を解決するCSS を変更する方法はありますか? 必要に応じてコンテナを追加できますが、component-parent要素またはその子のいずれかの CSS または html を変更したくありません。

4

2 に答える 2

1

選択に適用していたパディングの問題でした! 追加した

box-sizing:border-box;

これでこの問題は解決しましたが、ギャップを埋めるためにスパンをフロートする必要があります。

他に質問があれば教えてください！：） ではごきげんよう！

デモ http://jsfiddle.net/graHw/6/

于 2013-09-24T19:09:44.853 に答える