0 
<div class="titelcontent">
<div class="name">Name</div>
<div class="hzline"></div>
</div>

namediv とhzlinediv を 100% に自動調整しますtitelcontent。

titlecontentラベル (名前など) の長さはさまざまで、赤い下線がdivの残りのスペースにまたがるようにします。

以下を達成するにはどうすればよいですか？spanテーブルを使用してこれを行うのは簡単ですが、またはを介し​​てこれを行う方法がわかりませんdiv。

http://s22.postimg.org/zdxtj9da9/Untitled_1.png

4

4 に答える 4

0

背景画像が透けて見えるように更新

次のように疑似要素を使用して、マークアップを少しきつくすることができます。

<div class="wrapper">
    <div class="inner">Photoshop</div>
</div>

次の CSS スタイルを使用します。

div.wrapper {
    color:#82439a;
    font-size: 16px;
    font-weight: bold;
    font-family: tahoma;
    line-height: 180%;
    background: red url(http://placekitten.com/1000/500) no-repeat left top;
    overflow: hidden;
}

div.inner {
    position: relative;
    display: inner;
    color: yellow;
    padding-right: 0.50em;
    border: 1px dotted yellow;
}

div.inner:after {
    content: "\A0";
    position: absolute;
    bottom: 0;
    left: 100%;
    border-bottom: 5px solid #d71d00;    
    width: 1000%;
}

デモ フィドル: http://jsfiddle.net/audetwebdesign/wE8bC/

使い方

親要素div.wrapperは、背景画像を含むか、透明で祖先要素の背景を表示することができます。を設定する必要がありますoverflow: hidden。

ラベル ( <div.inner>)についてはposition: relative、下線として機能する下の境界線を持つ 100% 幅の疑似要素を設定してから生成します。( )div.inner:afterの右側に配置する絶対配置を使用し、幅を比較的大きくします。疑似要素はオーバーフロー条件をトリガーしますが、これは親要素のオーバーフローを隠すことで対処されます。パディングを使用して左右の間隔を制御できます。 <div.inner>left: 100%

displayプロパティを または のいずれかにinline設定して使用できますinline-block。を使用するdisplay: inlineと、IE7 で動作します。スタイルの必要に応じて行の高さを調整します。

生成されたコンテンツは改行なしのスペース、16 進コード "\A0" であることに注意してください。

IE7 のサポート

IE7 をサポートする必要がある場合inline-block、前の質問で説明したように使用する場合はハックが必要になります: IE7 は display: inline-block を認識しません

IE7 もサポートしていないtable-cellため、他の投稿されたソリューションの一部は同じ制限に直面します。

于 2013-04-25T11:51:50.987 に答える
0

または使用する代わりにdisplay: table：

.name {
    float: left;
}
.line-wrapper {
    display: block;
    overflow: hidden;
    padding-top: 6px;
}
.hzline {
    border-bottom: 3px solid red;
    width: 100%;
}

例を参照してください。

于 2013-04-25T10:44:56.693 に答える
0

私はあなたがこのようなものを見ていると推測しました. あなたが投稿した画像についての私の理解に基づいて、私の解決策を見つけてください。

HTML

<div>
    <span>Photoshop</span>
</div>
<div>
    <span>Adobe Illustrator</span>
</div>
<div>
    <span>3D Max</span>
</div>
<div>
    <span>Maya</span>
</div>
<div>
    <span>Windows 8 Pro</span>
</div>

CSS

div {
    line-height: 150%;
    border-bottom: 5px solid #d71d00;
}

div span{
    position:relative;
    bottom: -10px;
    background:#fff;
    padding: 0 5px;
    color:#82439a;
    font-size: 16px;
    font-weight: bold;
    font-family: tahoma;
}

あなたのフィードバックを教えてください。ありがとう

于 2013-04-25T10:45:21.080 に答える