0

ここで必要な効果を得る方法がわかりません。同じ行に 2 つの入力ボックスがあり、それらの下にラベルを配置し、それぞれの入力ボックスに合わせて配置したいと考えています。

<div class="container">
   <form class="form-inline" role="form">
      <div class="form-group">
          <label for="decimal_input">Label 1</label>
          <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
          = <label for="input2">Label 2</label> 
          <input type="text" value="I" width="30" id="input2" class="form-control" />
      </div>
</div>
</form>

詳細については、こちらの jsfiddle をご覧ください。

http://jsfiddle.net/justinhj/bTVKZ/2/

4

3 に答える 3

0

新しい HTML:

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <span class="inner-container">
                <label for="decimal_input">Label 1</label>
                <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
            </span>
            =
            <span class="inner-container">
                <label for="input2">Label 2</label>
                <input type="text" value="I" width="30" id="input2" class="form-control" />
            </span>
        </div>
</div>
</form>
</diV>

新しい CSS (もちろん、ラベルにクラスを追加します):

.container {
    margin-top: 10px;
}

.inner-container {
    position: relative;
}

label {
    top: 25px;
    left: 5px;
    position: absolute;
}

ここにフィドルがあります

于 2013-10-14T17:35:11.213 に答える
0

あなたはこれを試すことができます

追加の CSS:

label {
   display:block;
}

.form-group {
    display:inline-block;
}

変更された HTML:

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
            <label for="decimal_input">Label 1</label>
        </div>
        <div class="form-group">
            <input type="text" value="I" width="30" id="input2" class="form-control" />
            <label for="input2">Label 2</label>
        </div>
    </form>
</div>

デモ。

于 2013-10-14T17:33:19.927 に答える