2

display:table スタイルを使用して、最初の入力に項目を追加して、2 つの入力要素を隣り合わせに配置しようとしています。ただし、これにより、2 番目の入力要素が最初の入力要素と重なってしまいます。box-sizing: border-box を使ってみましたが、うまくいきませんでした。問題は、親 div の幅を制限してから、親を埋めるために入力要素の幅を 100% に設定しているようですが、これはまったく機能しません。JSfiddle の例を次に示します。

HTML

<div class="container">
    <div class="row">
        <div class="cell input-prepend">
            <span class="add-on">HI</span>
            <input type="text" />
        </div>
        <div class="cell">
            <input type="number"/>
        </div>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.row {
    display: table-row;
    width: 100px;
}

input[type=text] {
    width: 100%;
}

.cell {
    display: table-cell;
}

http://jsfiddle.net/5pgPY/7/

目標は、テキスト入力の各インスタンスに同じ幅ではない可能性のあるラベルがある上記のような一連の行を取得することです。そのため、テキスト入力がすべて整列していることを確認する何らかの方法が必要です。たぶん、先頭に追加された要素の使用をあきらめて、そのために別の div を使用する必要がありますか?

4

2 に答える 2

2

問題がどこから来るのかわかりません。とにかく、それは私のために働いた：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.row {
    display: table-row;
    width: 200px;
}

input[type=text] {
    width: 100%;
}

.cell {
    margin-right: 60px;
    float: left;
}
于 2013-02-17T07:20:42.637 に答える
1

あなたの例では、2 番目の input で input-prepend クラスを使用していません。次のように記述する必要があります。

<div class="cell input-prepend">
        <input type="number"/>
    </div>

CSS では、入力から width=100% を削除し、margin-right を使用します

    input[type=text] {
       margin-right:10px;

      }

JSfidlle の更新された JSfiddle prependを確認してください

<div class="container">
<div class="row">
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
</div>
</div>
于 2013-02-17T07:20:37.300 に答える