css - 在 h2 标签中跨度。自动调整宽度

Question

这是 HTML 部分:

<div class="container">
    <h2>Some text<span></span></h2>
</div>

元素的 CSS:

.container {
width: 533px;
}

.container h2 {
color: #ec1c24;
font-size: 48px;
text-transform: uppercase;
font-family: "Open Sans Extrabold";
letter-spacing: -3px;
}

.container h2 span {
background: none repeat scroll 0 0 #ec1c24;
float: right;
height: 34px;
margin-top: 16px;
width: 38%;
}

我想要做的是让跨度根据文本长度调整它的大小。使用此 CSS，如果文本太长，跨度会降低，但它应该会缩小。

这是一个例子:

http://jsfiddle.net/SCj5Z/

Answer 1

使用 flex display 你可以做到这一点。容器显示应该是 flex 并且 span 子属性可以是 1(或者基本上任何其他数字，因为我们没有任何其他 flex 子属性)。通过使用 flex，我们设置跨度大小来填充空白区域，因为 h2 大小是固定的(这是文本的大小)，跨度将填充所有空白区域。

你可以在这里阅读更多关于 flexbox 的内容: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这有帮助..

HTML:

<div class="container">
    <h2>Some text<span></span></h2>
</div>

CSS:

.container {
     width: 533px;
}

.container h2 {
    display: flex;
    align-items: center;
}
.container h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 3px solid #2B3F4F;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 4px;
}

http://jsfiddle.net/besatzardosht/SCj5Z/75/