Question

通过使用选择器.icon-bottom，我应该如何将图标放入底部？我尝试使用绝对/相对位置，但li内部的元素表现不正常。我甚至使用了负边距。请帮我玩吧。谢谢！ Fiddle here

  <ul class="icon-bottom">
    <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>
    <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>
  </ul>

Answer 1

您可以使用flex和订单，或使用float和clear特定来管理一些解决方案。

浮动解决方法：

＆＃13;

li {
    display:inline-block; 
    text-align:center;
    border:1px solid #ddd
}
li a { 
    padding:10px 20px;
}
/*outcome U wanted */
.icon-bottom li:before {
    content:'';
    float:left;
    height:1.6em;
}
.fa {
    clear:left;
    float:left;
    width:100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
      <ul class="icon-bottom">
        <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>
        <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>
      </ul>

＆＃13;

这个想法是通过浮动伪来清除低于高度集的浮动元素。留在顶部的房间将被自然流中的文本使用，只要它找到空间，否则它将落在下面。

弹性态度：）

＆＃13;

li {
    display:inline-block;
    border:1px solid #ddd
}
li a {
    text-align:center;
    padding:10px 20px;
    display:block
}
/*outcome I wanted */
 li a  {
    display:flex;
    flex-direction:column;
}

.fa {
    order:2
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
      <ul class="icon-bottom">
        <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>
        <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>
      </ul>

＆＃13;

Answer 2

好吧，假设无法更改标记，一种可能的选择是在图标上使用relative定位并设置负上边距和底部填充到锚标记：

<强> Example Here

.icon-bottom a {
    line-height: 1.2;
    margin-top: -1.2em;
    padding-bottom: 1.8em;
}

.icon-bottom i {
    position: relative;
    top: 2.4em;
}

预览：

＆＃13;

.icon-bottom a {
    line-height: 1.2;
    margin-top: -1.2em;
    padding-bottom: 1.8em;
}

.icon-bottom i {
    position: relative;
    top: 2.4em;
}

li { display:inline-block;border:1px solid #ddd }
li a { text-align:center;padding:10px 20px;display:block }

/*outcome I wanted */
li a .fa{ display:block }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<h2>Initial position</h2>
<ul class="icon-bottom">
  <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>
  <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>
</ul>

＆＃13;

Answer 3

快速解决方案，使用表。

li { display:inline-block;border:1px solid #ddd }
li a { text-align:center;padding:10px 20px;display:table }
li a .fa{ display:table-footer-group; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="icon-bottom">
  <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>
  <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>
</ul>

如何在不使用绝对定位和负边距的情况下从左向下切换位置？

3 个答案: