是一个简单的练习,可能比其他解决方案更好,但我想知道在 html 和 css 中创建这种结构的最佳方法是:
我想要的是文本,然后创建 2 像素线、1 像素红色和其他 1 像素绿色。
不确定 crossbrowser 的最佳解决方案是什么,想要同时结束行。
已经尝试过使用边框、小时、背景......但似乎没有完美完成。
ps-寻找解决方案而不重复图像
简单的答案是使用一个简单的标签(<i>
例如)并对其应用 CSS 样式。
<p>Your text <span class="line"></span></p>
CSS 可能如下所示:
.line {
position: relative;
display: inline-block;
* display: inline; /* fix for IE bugs */
* zoom: 1; /* fix for IE bugs */
height: 1px;
width: 100px;
background-color: #f00;
border-bottom: 1px solid #00f;
vertical-align: middle;
margin-bottom: 5px;
}
CSS:
#lines{
border-bottom: 1px solid red;
border-top: 1px solid green;
display: inline-block;
height: 5px;
margin-left: 10px;
width: 100px;
}
标记:
<span id='text'>My text</span>
<span id='lines'></span>
这是我的 2 美分...类似于 Rodolfo 但没有垫片
与 CSS:after
一起使用content
:
<div class="container">
<div class="linetext">Text</div>
</div>
.container {
padding: 15px;
border: 4px solid black;
}
.linetext:after {
content: "";
display:inline-block;
width: 50px;
height:1px;
border-top: 1px solid green;
border-bottom: 1px solid red;
margin-left: 6px;
}
试试看:http: //jsfiddle.net/wBTqV/
文档
:after
伪选择器 - https://developer.mozilla.org/en/CSS/:aftercontent
MDN 上的CSS属性 - https://developer.mozilla.org/en/CSS/content你可能有一个“间隔”图像(1x1 透明图像),所以你可以做一个
<div style="float:left">Your text</div>
<div style="float:left">
<div style="background-color:green"><img src="spacer.gif" width="100px" height="1px"></div>
<div style="background-color:red"><img src="spacer.gif" width="100px" height="1px"></div>
</div>