Bootstrap 3 个带有 div 设计的自定义 li 元素
Bootstrap 3 custom li element with div designing
我在 Bootstrap 3 中使用自定义的 li 元素。
我想要的是类似的东西-
.
我所做的是-
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 类似于-
<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 */
但我得到的是-
谁能帮我解决这个问题?
在此先感谢您的帮助。
使用 .clearfix class 如下:
<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 元素。 我想要的是类似的东西-
我所做的是-
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 类似于-
<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 */
但我得到的是-
谁能帮我解决这个问题?
在此先感谢您的帮助。
使用 .clearfix class 如下:
<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;
}