html填满剩余空间,html – 标题,两侧填充剩余空间

我被要求创建这个标题,纯粹用css,它甚至可能吗？

文本的背景需要保持透明,h2需要跨越任何容器的宽度,并且左右边框自动填充剩余空间.

h2 {

font-size:42px;

line-height:48px;

width:100%;

overflow: hidden;

&:before {

content:'';

position:relative;

padding-left:50px;

padding-right:10px;

margin-right:10px;

margin-bottom:10px;

background:red;

height:3px;

display:inline-block;

}

&:after {

content:'';

margin-left:10px;

width:100%;

background:red;

height:3px;

display:inline-block;

}

左侧很容易,但是我被困在右侧.

我似乎无法弄清楚如何只使正确的线填充容器右侧的剩余空间.

html填满剩余空间,html – 标题,两侧填充剩余空间相关推荐

背包问题_（DP经典），一，（01背包，填满背包）
背包系列已更新一,(01背包,填满背包) 二,(多重背包) 三,(完全背包) 目录一,01背包(对于一个物品,你要么全拿,要么不拿) 核心dp方程,dp[i][j]=max(dp[i-1][j], ...
一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
android 并排按钮,简单布局：右边三个按钮并排靠右，左边一个输入框填满其他空间，多谢...
求一个简单布局:右边三个按钮并排靠右,左边一个输入框填满其他空间,谢谢如我的一行要显示四个控件 TextView1,Button1,Button2,Button3 要求是 Button1,Butto ...
如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar&quo ...
让div填满剩下的空间
让div填满剩下的空间方案一一如果parent是body div2{position:fixed;top:hpx;bottom:0; } 二如果parent是div .parent{pos ...
Taro,小程序scroll-view 填满剩下的高度空间,关闭页面回跳(部分ios机型滚动不到底部)
其实这样在开发小程序的时候还是比较常见的,就是我们页面底部有一个需要滚动加载滚动的展示容器这个时候选择scroll-view 就是很合理了但是我们这个时候需要让scroll-view 填满 ...
css自动填满父级剩余宽度
1.父元素内有两个子元素,其中一个元素宽度已知,另一个元素填满父级剩余宽度,这种情况可以用 calc() 来实现. <html><head><meta charset=& ...
css如何让页面填满剩余高度与宽度
首先了解CSS3支持vw(视口宽度)和vh(视口高度)作为单位例如:1vh表示视口高度的1% 所以在CSS3中,我们可以使用calc()函数来进行动态计算: 例如: <div><d ...
css div填满剩余高度
<div class="father"><div class="child1"></div><div class=&q ...

html填满剩余空间,html – 标题,两侧填充剩余空间

html填满剩余空间,html – 标题,两侧填充剩余空间相关推荐

最新文章

热门文章