Bootstrap 3自定义li元素与div设计 [英] Bootstrap 3 custom li element with div designing
本文介绍了Bootstrap 3自定义li元素与div设计的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在Bootstrap 3中使用了自定义的li元素。
我想要的是类似的东西 -
I am using a customized li element in Bootstrap 3. What I want is something like it-
。
我所做的是 -
HTML -
<ul class="list-group">
<li class="list-group-item" id="baal">
<div style="display: inline;">
<div class="inline">
Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<div class="inline">
<img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<blockquote>
<p>angulard it's obviously tremendously helpful to a lot of people - they took the time to search for a solution,</p>
</blockquote>
<div>
More thing
</div>
</div>
</li>
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
因此,div的HTML类似于 -
So, the div's HTML is something like-
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
CSS是 -
/* List Item Styling */
div.inline
{
float:left;
}
.divider-vertical
{
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
/* End - List Item Styling */
am getting is -
But what I am getting is-
任何人都可以帮助我解决这个问题?
Can anyone help me to solve this problem?
感谢您提供帮助。
推荐答案
使用.clearfix类如下:
Use the .clearfix class as follows:
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
<div class="clearfix"></div>
</li>
css:
/* List Item Styling */
div.inline, .divider-vertical
{
height: 50px;
float:left;
}
.divider-vertical
{
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
这篇关于Bootstrap 3自定义li元素与div设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文