Question

我想调整标题＆＃39;标签与其他标签跨越同一作品上的标签。我试过显示：内联块，但它没有用。我该怎么做？感谢。

<div class="panel panel-default">
        <div class="panel-heading">
            Title
        </div>
        <div class="panel-body">
            <div class="row" >
                <div class="col-sm-3">
                    <label>Header</label>
                </div>
                <div class="col-sm-9">
                    <h4><span class="label label-success">Success</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-warning">Warning</span>
                    <span class="label label-danger">Danger</span></h4>
                </div>
            </div>
        </div>
    </div>

http://plnkr.co/edit/uct0S6PDIXpNbDCd1p1K?p=preview

Answer 1

从col-sm-3 div中剪切标题标签，并使用其他span标签粘贴col-sm-9。然后所有人都会以相同的顺序排列。

Answer 2

看来你正在使用Bootstrap，然后确保你没有覆盖bootstrap.css或bootstrap.min.css，下面给出了参考工作代码，如果你正在寻找移动浏览器，你需要编辑标准Bootstrap CSS文件bootstrap.css或将以下行添加到head（样式）标签内的HTML代码中，下面给出了工作示例：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
<style>
.row
{
  display:flex;
}
}
</style>
  </head>

  <body>
   <div class="panel panel-default">
        <div class="panel-heading">
            Title
        </div>
        <div class="panel-body">
            <div class="row" style="dispay: block;" >
                <div class="col-sm-3">
                    <label style="padding-top:10px;">Header</label>
                </div>
                <div class="col-sm-9">
                    <h4><span class="label label-success">Success</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-warning">Warning</span>
                    <span class="label label-danger">Danger</span></h4>
                </div>
            </div>
        </div>
    </div>
  </body>

</html>

Answer 3

使用下面的css。

.logo-head {
line-height: 39px;
margin: 0 !important;
}

将类添加到标签

<label class="logo-head">Header</label>

Answer 4

使用您的代码添加这段CSS，它可以正常工作

.col-sm-3 { display: table; float:left;    height:40px;}
.col-sm-9 { display: table; float:left; }
.col-sm-3  > label , h4 > span { display: table-cell; vertical-align: middle; }

的 Demo

Answer 5

喜欢这个？ http://plnkr.co/edit/q2hxlWnTP9BLSnhIKd6M?p=preview

由于我无法编辑您的CSS文件，我添加了以下内联CSS：

<div class="col-sm-3" style="float:left ; padding-top:12px">

干杯！

辛西娅

在同一行html上对齐元素

5 个答案:

的 Demo