Question

我有一个html，其中包含1个标签，1个div框包含一个文本。

<label class="control-label col-xs-2">Name:</label>
<div class="col-xs-10">
  <strong>Test</strong>
</div>

但它们似乎并不在同一条线上。 Here is the jsfiddle任何人都可以帮助我如何在同一条线上对齐它们。

由于

Answer 1

我看到你正在使用bootstrap。 Bootstrap已经有标签的默认CSS。因此，如果您不希望发生这种情况，请从<label>元素中删除填充。

看起来像这样：

.form-horizontal .control-label {
    float: left;
    width: 160px;
    /* padding-top: 5px; */
    text-align: right;
}

希望这有帮助，干杯。

Answer 2

将padding-top应用于CSS中的col-xs-10。

.col-xs-10 {
 padding-top: 5px;
}

Answer 3

试试这个

<div class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-xs-2">Name:</label>
    <div class="col-xs-10">
      <strong>Test</strong>
    </div>
  </div>
</div>

Answer 4

在bootstrap中，如果你想要一个水平形式，它被称为内联。因此，如果您将“form-horizontal”更改为“form-inline”，您将获得该水平键/值对。下面是我更改为您的代码的html。我希望这就是你要找的东西。

<div class="form-inline" role="form">
   <div class="form-group">
   <label for="control-label col-xs-12">Name:</label>
   <input type="text" class="form-control col-xs-10" id="control-label"placeholder="text here">           
   </div>
   </div>

另外，您会注意到我插入了一个输入标签。这将允许网站访问者输入值。

将文本对齐在同一行

4 个答案: