Question

我有一个以页面为中心的标题（h1）。我想在标题的左侧和右侧添加线条，以便它们填充页面宽度的其余部分。但是，我希望线条适应标题的宽度，这是动态的。所以，我希望动态计算线宽。

以下是我要完成的一个示例：http://jsfiddle.net/cAEqE/1/

在示例中，我将线条的宽度设置为35％，以便它们可以获得我想要的效果。但是，如果标题更长，它将分为2行，我不希望这种情况发生。

我的老板告诉我要避免使用javascript，所以只使用CSS会很棒。但是，如果事实证明这是不可能的，我将转向优秀的旧jQuery。干杯！

编辑：网站有背景图片，所以我不能在h1上使用背景。谢谢！

Answer 1

您可以这样写：

<强> CSS

h1 {
    font-size: 26px;
    text-align:center;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    background:#fff;
    padding:0 10px;
}

#title {
    text-align:center;
    border-bottom:1px solid #97999C;
    height:10px
}

<强> HTML

<div id="title">
    <h1>TITLE TEST</h1>
</div>

选中此http://jsfiddle.net/cAEqE/27/

<强>已更新

选中此http://jsfiddle.net/cAEqE/63/

Answer 2

您应该在父div上使用背景图片，而不是使用div换行。

例如，您的HTML会更简单：

<div id="content">
    <h1>TITLE TEST</h1>
</div>

你的CSS将是：

h1 {
    font-size: 26px;
    background-color: white;
    display:inline;
    padding:0 30px;
}

#content {
    text-align:center;
    width:100%;
    background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center;
    margin:0;
    padding:0;
}

我从Jira那里窃取了相当多的代码basically what you're after。

仅用CSS设置动态宽度？

2 个答案: