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",即 span
、img
、h4
、a
添加 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%;
}
我需要完美对齐 <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",即 span
、img
、h4
、a
添加 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%;
}