将<i>放在底部自动调整高度的<li>内

Question

我想尝试一下我的菜单。
我正在使用#ifdef I_AM_USING_BOOST #include <boost/any.hpp> #else #include <string> #endif namespace test { #ifdef I_AM_USING_BOOST using my_defined_type = boost::any; #else using my_defined_type = std::string; #endif } 和bootstrap css样式。 我认为在实况页面上显示问题要好得多。 我需要实现两个目标

1. 我需要将这个font awesome图标放在底部，边距很小（2-3px） 像这样。所以它在任何情况下都应该在底部，而且余地很小。



1. 问题是chevron项目未根据其中的内容调整大小。正如您在此屏幕截图中看到的那样。它粘在底部边框上，如果我添加一些边距，我会得到以下结果



我正在使用以下样式

< li >

以下是完整的.item-icon-container { margin: 2px 0 15px 0; float: right; display: block; height: 100%; } .item-icon-container .expand-indicator { display: block; } .item-icon-container .badge { display: block; } 代码http://pastebin.com/S26C9xSU

请帮助解决问题。

我将不胜感激任何帮助

Answer 1

为了确保LI中的所有元素都影响它的高度，我们可以将最后一个元素添加到LI中，样式为clear:both

可能的解决方案：

1）使用CSS：选择器后面

.list-group-item a:after{
  content:"";
  font-size: 1px;
  display:block;
  clear:both;
}

2）额外元素。在每个li结束时，您可以添加

<div style="clear:both;"></div>

类似的东西：

<li id="cat-id-5" class="cat-parent-empty list-group-item">
    <div class="item-icon-container">
        <span class="badge">1</span>
        <i class="fa expand-indicator fa-chevron-down"></i>
    </div>
    <a href="http://crosp.net/category/technology/" title="View all posts in Technology">
        <i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
        &nbsp; Technology
    </a>
    <div style="clear:both;"></div>
</li>

CSS样式看起来更好。额外元素具有更好的兼容性。

Answer 2

尝试在expand-indicator元素中添加填充（我猜，没有看到你的HTML）。 https://jsfiddle.net/ve39a1qj/

.item-icon-container .expand-indicator {
    display: block;
    padding-bottom: 20px;
}