Question

我有一些文字元素显示为inline-block，每个文字元素都有固定数量的padding，比如10像素。所有这些文本元素都以text-align为中心，位于未知宽度的容器内。这是一个JSFiddle作为例子：http://jsfiddle.net/fhtkLwak/5/

HTML ：

<div class="outer">
    <div class="inner">
        <span style="background:#0f0;">A</span>
        <span style="background:#00f;">B</span>
        <span style="background:#ff0;">C</span>
        <span style="background:#0ff;">D</span>
        <span style="background:#f0f;">E</span>
    </div>
</div>

CSS ：

.outer {width:500px;}
.inner {
    background:#f00;
    font-size:0; /* To avoid white space width */
    text-align:center;
}
.inner span {
    display:inline-block;
    font-size:20px;
    padding:10px;
}

我想要的是第一个元素background / padding尽可能向左延伸，最后一个元素的background / padding延伸至尽可能的权利。如果可以在没有padding的情况下完成，只要background具有所描述的行为。

Answer 1

如果您不介意牺牲一些浏览器支持，CSS flexbox是最简单的方法：http://jsfiddle.net/teddyrised/fhtkLwak/9/

此方法的主要优点是不需要明确设置.outer 的宽度，因此它非常灵活（因此名称为flex显示）：

.outer {width:500px;}
.inner {
    background:#f00;
    display: flex;
    justify-content: center;
}
.inner span {
    display: block;
    font-size:20px;
    padding:10px;
}
.inner span:first-child,
.inner span:last-child {
    flex-grow: 1;
}
.inner span:first-child {
    text-align: right;
}

您需要在flex属性中添加适当的供应商前缀，以启用跨浏览器支持。

我们在这里做的基本上是给父元素.inner一个flex显示属性。这使我们可以微调其<span>个孩子的维度。由于您只希望第一个和最后一个子项增长以填充所有剩余空间，因此我们允许它们增长以填充所有可用空间flex-grow: 1（默认为flex-grow: 0），然后设置文本对齐方式。第一个孩子在右边实现所需的文本对齐。

有关CSS flexbox的综合指南，您可以查看the guide published by Chris Coyier。

更新：如果目标受众的浏览器中缺少CSS flexbox支持，则可以考虑设置背景渐变。诀窍在于你将设置一个双色背景，在中间分开，左边的颜色对应最左边的<span>，右边的颜色对应于最右边的对应物。

同样，这种方法的优点是它不需要明确说明.outer的宽度。然而，主要的缺点是必须知道第一个和最后一个跨度的背景颜色和静态，否则你将不得不依靠JS来嗅出（动态）背景颜色并在运行中创建新的背景渐变

.outer {
    width:500px;
    background-image: linear-gradient(90deg, #0f0 0%, #0f0 50%, #f0f 50%, #f0f 100%);
}

这个解决方案在所有代码都被保留的意义上具有较小的侵入性，而且我只添加了background-image声明:)

http://jsfiddle.net/teddyrised/fhtkLwak/11/

Answer 2

实际上有几种方法可以实现这一点，至少目前我确定其中有3种。

IE9及更老版本不支持Flexbox，CSS表也有自己的缺点，...但是如果不改变当前方法（即继续使用inline-block），你可以通过添加{伪造效果{1}}和background-color到容器：

<强> Example Here

border-right

宽度变化

如果容器没有明确的宽度，您仍然可以使用.outer { width:250px; background-color: #0f0; /* equal to background color of the first item */ border-right: 250px solid #f0f; /* equal to background color of the last item */ } .inner { margin-right: -250px; font-size:0; /* To avoid white space width */ text-align:center; }来实现目标。

当然，我们可以achieve that by CSS Gradients提到@Terry，但为了浏览器的支持，我会选择背景颜色。

在这种情况下，我们可以将inline-block border-right添加到.outer，而不是将.inner添加到background-color，最后通过相对定位将项目与中心对齐给他们right -50%如下：

<强> Updated Demo

.outer {
    /* width: 90%; */        /* Arbitrary */
    background-color: #f0f;  /* equal to background color of the last item */
}

.inner {
    background-color: #0f0; /* equal to background color of the first item */
    width: 50%;
    font-size:0; /* To avoid white space width */
    text-align:center;
}

.inner span {
    display:inline-block;
    font-size:20px;
    padding:10px;

    position: relative;
    right: -50%;
}

将边距扩展到未知宽度

2 个答案:

宽度变化