如何在不使用絕對定位和負邊距的情況下從左至右切換位置？

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

如何在不使用絕對定位和負邊距的情況下從左至右切換位置？

回答

相關問題