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

我不知道如何去获得我想要的效果。我有两个输入框位于同一行，我想在它们下面有标签并对齐以匹配各自的输入框。使用引导对齐输入框下的标签

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

来源

2013-10-14 justinhj

可以更改HTML？否则，您将不得不使用某种定位或负边距来获取输入字段下的标签文本。如果可以的话，我只需将输入字段放入标签元素中，标签文本放在标签元素后面（仍在标签元素中），然后将标签和输入的宽度相同。 – CBroe

您的HTML嵌套不当，无论是在这里还是在您的小提琴中。使用TidyUp按钮作为语法检查器。 – isherwood

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-14 17:30:30 isherwood

对于使用'br'标签强制元素换行符有什么意见？我一直认为它们应该被用来强制在'p'标签中的文本换行。 –

我不会不同意 - 我通常不使用它们进行布局。我做了一个快速修复。当然还有其他的选择。 – isherwood

你可以试试这个

额外的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>

DEMO.

来源

2013-10-14 17:33:19

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

这里的fiddle

来源

2013-10-14 17:35:11

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

回答

相关问题