gpt4 book ai didi

html - 自动跨度宽度

转载 作者:太空宇宙 更新时间:2023-11-03 20:53:06 25 4
gpt4 key购买 nike

我有以下标题的 HTML。 .left.right 是空跨度。我有 .left 的特定宽度,但 .text 宽度并不总是相同。我想为 .left(固定宽度)和 .right 设置背景。 .right 应该获得父元素 (h1) 中的所有剩余空间。如何做到这一点?

<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>

我正在尝试使用不起作用的 CSS:

.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}

.right{
display: inline-block;
background: blue;
}

这是 JSFiddle 链接: http://jsfiddle.net/jMR8u/

这是我想要得到的:enter image description here

想法是在 h1 中设置一个背景图像,除了 .text 范围,问题是我不能为 .text 设置背景,否则会更容易。

最佳答案

此版本将拉伸(stretch)以适应 .text 的内容并且应该是跨浏览器的。

您可以通过将其设为 .text 的边框来伪造蓝色(右)背景:

.text { border-right: 1000px solid; }

然后,将 .right 向左移动 1000px:

.right { margin-left: -1000px; }

.left一个宽度,让每个元素都inline-block,隐藏右边多余的蓝色边框,确保.text.right 不换行:

.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }

然后给它上色!

body { background: green; }
.left { background: red; }
.text { border-color: blue; }

这是一个 JSFiddle demonstration :

Screenshot from the JSFiddle

关于html - 自动跨度宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13732854/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com