集中第3行中的第2個項目

Question

我有一行3個元素，第一個浮動左邊，第三個浮動右邊，我如何使第二個浮動中心在另一個2之間？

所有的元素都將是動態的寬度，不能把設置的空白

我的例子是http://jsfiddle.net/S5fA3/

<div class="col-md-12 tags"> 
    <a class="tag" href="/">Lorem</a> 
    <a class="tag" href="/">Dolorsitamet</a> 
    <a class="tag" href="/">ipsum</a> 
</div> 

Answer 1

像這樣

JSfiddle Demo

CSS

.tags { 
padding:15px; 
    text-align: center; /*center them all */ 
} 
.tags a.tag { 
display: inline-block; /* change to inline-block*/ 
font-size:16px; 
height:40px; 
padding:9px 15px; 
text-decoration:none; 
width:auto; 
} 
.tags a.tag:nth-child(1) { /* float first left */ 
    float:left; 
} 
.tags a.tag:nth-child(3n) { /* float last right */ 
float:right; 
} 
.tags { 
background:#55616F; 
} 
.tags a.tag { 
background:#93A1AF; 
color:#FFFFFF; 
} 

Answer 2

如果您願意將腳放在CSS3中，請查看新的Flexbox規範。它完美的作品，雖然它是在舊的瀏覽器不支持（供應商前綴都可以略少過時的瀏覽器）：

.tags { 
    display: flex; 
    justify-content: space-between; 
    padding: 15px; 
} 
.tags a.tag { 
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: auto; 
    /* Can be concatenated into shorthand: 
    flex: 0 0 auto; 
    */ 
    font-size: 16px; 
    height: 40px; 
    padding: 9px 15px; 
    text-decoration: none; 
} 
.tags { 
    background: #55616F; 
} 
.tags a.tag { 
    background: #93A1AF; 
    color: #FFFFFF; 
} 

http://jsfiddle.net/teddyrised/S5fA3/2/