在同一行对齐文本答案

【问题标题】：align text on the same line在同一行对齐文本
【发布时间】：2016-06-05 11:59:01
【问题描述】：

我有一个包含 1 个标签和 1 个 div 框包含文本的 html。

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

但它们似乎不在同一条线上。 Here is the jsfiddle 谁能帮助我如何将它们对齐在同一行。

谢谢

【问题讨论】：

将div 替换为span?
padding-top:5px 到您的 div..jsfiddle.net/ckxSs/1178

标签： html text-align

【解决方案1】：

我看到您正在使用引导程序。 Bootstrap 已经为标签提供了默认 CSS。因此，如果您不希望发生这种情况，请从 <label> 元素中删除填充。

看起来像这样：

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

希望这会有所帮助，干杯。

【讨论】：

对不起代码，你必须像这样禁用填充顶部：jsfiddle.net/ckxSs/1191

【解决方案2】：

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

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

【讨论】：

修改引导类的坏主意

【解决方案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>

【讨论】：

【解决方案4】：

在引导程序中，如果您想要一个水平形式，它被称为内联。因此，如果您将“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>

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

【讨论】：

哎呀，我刚刚注意到我弄乱了列，但这不会影响您想要的结果，您可以更改该部分。