仅使用 CSS 设置动态宽度？

Posted 2023-03-06

【中文标题】仅使用 CSS 设置动态宽度？

【英文标题】：set dynamic width with only CSS?

【发布时间】：2012-04-09 20:26:38

【问题描述】：

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

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

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

我的老板告诉我不要使用 javascript，所以最好只使用 CSS。但是，如果这被证明是不可能的，我会转向好的旧 jQuery。 干杯！

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

【参考方案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/

【讨论】：

这其实是个好主意，谢谢。但是，我有背景图片，所以我不能为 h1 设置背景，否则设计师会杀了我。我将使用此信息编辑问题。

【参考方案2】：

您应该在父级div 上使用背景图像，而不是使用divs 作为线条。

例如，您的 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。