Question

我需要完美地对齐<div>中包含的几个元素。这些元素是<span>，<h4>，<img>和<a>。我使用的是Bootstrap3。您可以直接在this fiddle上查看代码。

这是我的HTML：

<body>
  <div class="data-head">
    <span class="glyphicon glyphicon-random"></span>
    <h4>Network length</h4>
    <img src="http://www.jotform.com/images/ajax-loader.gif"/>
    <a href="#" class="glyphicon glyphicon-circle-arrow-down"></a>
  </div>
</body>

这是我的CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

h4 {
  margin-left: 35px;
}

.data-head {
  padding: 1em;
  margin-bottom: 10px;
  border-style: solid;
}

我尝试了许多这样的问题，例如display:inline-block或Bootstrap类inline，但我无法实现这一目标，而且我在可能的解决方案中有点迷失...我非常感谢你提前寻求帮助和建议！

Answer 1

只需修改你的css如下：

.data-head {
    padding: 1em;
    margin-bottom: 10px;
    border-style: solid;
    overflow: hidden;
}

然后你必须提供＆＃34; float：left＆＃34;每个元素，即span，img，h4，a将margin-top: 0px;添加到h4

Answer 2

虽然，它们并非“完全”对齐，但请参阅以下更新的小提琴，它可以帮助您：http://jsfiddle.net/nyy6w5ew/3/

<强> HTML：

<body>
  <div id="ass" class="col-md-12">
    <div class="data-head">

      <div class="data-title">
        <span class="glyphicon glyphicon-random symbols"></span>
        <h4>Network length</h4>
        <div class="inner">
          <img src="http://www.jotform.com/images/ajax-loader.gif" id="loading-ass" class="loading loading-ass" />
          <a href="#" class="glyphicon glyphicon-circle-arrow-down show-data" id="ass-lineaire"></a>
        </div>
      </div>

    </div>
  </div>
</body>

还添加了以下 CSS：

.data-title span, .data-title h4, .data-title .inner img, .data-title .inner, .data-title .inner a {
  display: inline-block;
}

我已经给了没有课程（在.data-title内）.inner的课程的div，并且还给了display: inline-block。

Answer 3

您可以使用“float：left”

执行此操作

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
  margin: 20px;
}

h4 {
  margin-left: 35px;
  display: inline;
}

.data-head {
  padding: 1em;
  margin-bottom: 10px;
  border-style: solid;
  float: left;
  width: 100%;
}

Bootstrap：设置内联元素

3 个答案: