0

我不确定如何在这里获得我想要的效果。我有两个在同一行上的输入框，我想在它们下面有标签并对齐以匹配相应的输入框。

<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

4

http://jsfiddle.net/isherwood/bTVKZ/6

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <div class="pull-left">
                <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
                <br />
                <label for="decimal_input">Label 1</label>
            </div>
            <div>
                <input type="text" value="I" width="30" id="input2" class="form-control" />
                <br />
                <label for="input2">Label 2</label>
            </div>
        </div>
    </form>
</div>
于 2013-10-14T17:30:30.183 回答
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 回答
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 回答