1

是一个简单的练习,可能比其他解决方案更好,但我想知道在 html 和 css 中创建这种结构的最佳方法是:

我想要的是文本,然后创建 2 像素线、1 像素红色和其他 1 像素绿色。

在此处输入图像描述

不确定 crossbrowser 的最佳解决方案是什么,想要同时结束行。

已经尝试过使用边框、小时、背景......但似乎没有完美完成。

ps-寻找解决方案而不重复图像

4

5 回答 5

2

简单的答案是使用一个简单的标签(<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;
}
于 2012-06-27T17:34:06.913 回答
1

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>   
于 2012-06-27T17:32:25.463 回答
1

这是我的 2 美分...类似于 Rodolfo 但没有垫片

http://jsfiddle.net/c4HjQ/

于 2012-06-27T17:34:37.390 回答
0

与 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/

文档

于 2012-06-27T17:38:50.503 回答
-1

你可能有一个“间隔”图像(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>
于 2012-06-27T17:28:46.213 回答