Bootstrap:设置内联元素

Bootstrap: set inline elements

我需要完美对齐 <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 但我无法做到这一点,我得到了一点在可能的解决方案中有点迷失......非常感谢您的帮助和建议!

虽然,它们都没有 "perfectly" 一致,请参阅以下更新的 fiddle 这应该对您有所帮助: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;
}

我已经给没有 class(在 .data-title 内)的 div 一个 .inner 的 class 并且还给了那个display: inline-block.

只需修改您的 css 如下:

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

然后您必须为每个元素提供 "float:left",即 spanimgh4a 添加 margin-top: 0px;h4

您可以使用 "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%;
}