Html 使用引导对齐输入框下的标签

我不知道如何才能达到我想要的效果。我有两个在同一行的输入框，我想在它们下面有标签，并对齐以匹配相应的输入框

<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>

标签1
=标签2

有关更多信息，请查看此处的JSFIDLE：

标签1


标签2

标签1


标签2

您可以试试这个

额外CSS:

label {
   display:block;
}

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

<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>    

修改的HTML:

label {
   display:block;
}

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

<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>    

标签1
标签2

你可以试试这个

额外CSS:

label {
   display:block;
}

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

<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>    

修改的HTML:

label {
   display:block;
}

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

<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>    

标签1
标签2

您的新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>

以下是您的新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>

---

这是

可以更改HTML吗？如果没有，则必须使用某种定位或负边距来获取输入字段下的标签文本。如果可以的话，我会把输入字段放在标签元素中，后面是标签文本（仍然在标签元素中），然后只给标签和输入相同的宽度。你的HTML在这里和小提琴中都嵌套不正确。使用TidyUp按钮作为语法检查器。您可以更改HTML吗？如果没有，则必须使用某种定位或负边距来获取输入字段下的标签文本。如果可以的话，我会把输入字段放在标签元素中，后面是标签文本（仍然在标签元素中），然后只给标签和输入相同的宽度。你的HTML在这里和小提琴中都嵌套不正确。使用TidyUp按钮作为语法检查器。您对使用

br

标记强制元素换行有何看法？我一直认为应该使用它们来强制

p

标记中的文本换行。我不会不同意——我通常不会在布局中使用它们。我这样做只是权宜之计。当然还有其他选择。您对使用

br

标记强制元素换行有何看法？我一直认为应该使用它们来强制

p

标记中的文本换行。我不会不同意——我通常不会在布局中使用它们。我这样做只是权宜之计。当然还有其他选择。