1

単純な演習であり、おそらく他のソリューションよりも優れたソリューションがありますが、html と css でこの種の構造を作成するのに最適なのはどれでしょうか。

私が欲しいのはテキストです。次に、2ピクセルの線、1ピクセルの赤、1ピクセルの緑を作成します。

ここに画像の説明を入力

crossbrowser の最適な解決策がわからない、行を同時に終了したい。

すでに border, hr , background .. で試しましたが、完全に終了していないようです。

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セントです...ロドルフォに似ていますが、スペーサーはありません

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 に答える