Question

我有一排3个元素，第一个向左浮动，第三个向右浮动，如何让第二个浮动在另一个2之间？

所有元素都是动态宽度，因此无法设置边距

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

将第2项集中在3行中

2 个答案: