Question

我很难弄清楚如何修复一个小的对齐问题，如小提琴中所示。文本框和“R”引导程序标签未在顶部对齐。

https://jsfiddle.net/haribalaji/p7Louzq9/

.inline-form-control
{
  display: inline-block;
  width: 90%;
}

.labelClass
{
  display: inline-block;
  height: 40px;
}
.label-primary {
    background-color: #337ab7;
}
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

Here is the code

<code>
<form>
<div class="row">
	<div class="col-xs-12 col-md-8">
		<div class="form-group">
			<label for="adrTerm"><span>Adverse Reaction Term</span><span style="color:red;">*</span></label>
			<div class="field"><input type="text" name="adrTerm" class="inline-form-control form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"><span class="labelClass label label-primary">R</span>
			<div class="input"></div>
		</div>
	</div>
</div>
</form>
</code>

Answer 1

此fiddle表示“R”标签与输入的高度相同，并与其右侧对齐。

正如前面评论中所提到的，标记需要更加简单：

<div class="container">
  <form>
    <div class="form-group">
      <label for="adrTerm" class="col-xs-12 control-label text-left">Adverse Reaction Term<span style="color:red;">*</span></label>
      <div class="col-xs-11">
        <input type="text" name="adrTerm" class="form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1">
      </div>
      <div class="col-xs-1">
        <label class="text-center rLabel">R</label>
      </div>
    </div>
  </form>
</div>

而且，需要很少的自定义CSS：

.container {
  margin: 10px
}

.rLabel {
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #337ab7;
  margin-left: -30px;
  color: #fff;
  width: 80%;
}

这仍然可能无法满足您的需求。例如，您可能不关心在调整窗口大小时“R”标签如何更改宽度。如果是这样，请将.rLabel类中的宽度更改为固定宽度。

请注意Bootstrap样式如何作为外部资源添加到小提琴中。

另请注意，需要使用容器。

Answer 2

更新了JSFIDDLE

的链接

.labelClass
{
   display: inline-block;
   position:absolute;//added
}
.label {
    display: inline;
    padding:0 0.6em;//changed
    font-size: 75%;
    font-weight: 700;
    line-height: 1.8;//changed
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

使标签位置绝对，删除不必要的填充，更改了标签的行高。

如果您正在使用，请使用bootstrap的输入组加载项。

http://v4-alpha.getbootstrap.com/components/input-group/

对齐文本框和引导标签

2 个答案: