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

1

一个快速的解决方案，使用表。

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>

来源

2015-04-01 00:12:50

+0

谢谢！这是最灵活的解决方案。 – jamez88 2015-04-01 00:14:47

+0

不客气。我也遇到过这个问题。 – 2015-04-01 00:18:50

1

你可以使用Flex和秩序或float和clear specifities管理有点变通。

浮动工作周围：

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%; 
 
}

<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>

的想法是清除经由floatting伪设置高度低于floatting元件。只要找到空间，自然流中的文本就会使用顶部的空间，否则它会下降。

柔性态度:)

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 
 
}

<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>

来源

2015-03-31 23:04:52

1

好吧，假设改变的标记是不可能的，一个可能的选择是使用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; 
}

前瞻：

.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 }

<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>

来源

2015-03-31 23:04:59

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

回答

相关问题