0

テキストの幅に合わせて自動的に拡張される :after セレクターを使用して、テキストを含む div を作成するにはどうすればよいですか?

複雑に聞こえますか?多分そうです。

最初に div id と :after セレクターを使用してこれを解決しましたが、互換性と機能に関する問題が多すぎます。私はクロムでこれを問題なく見せることができますが、配置をズームすると配置がおかしくなります。

background-color と :after を .png ファイルに置き換えるアイデアがありますが、どうすればよいかよくわかりません。以下のコードには、左側にポインターがあり、次に長い水平の本体があります。これを .psd から 3 つの png ファイルにスプライスできます。

これが明確であることを願っています。以下の私のコードを見て、私に質問をしてください!

#div1 {
padding:6px 0 0 0;
left:49px;
position:relative;
float:left;
height:35px;
background-repeat:no-repeat;
background-position:left
}

#div1 p {
font-family:sans-serif,Helvetica;
font-size:14px;
font-style:italic;
text-decoration:none;
color:#FFF;
margin:5px 0 0 -2px;
padding-right:10px;
text-shadow:0 1px 0 #000
}

.div2 {
width:auto;
min-height:30px; 
max-width:420px;
background: #fc1e10;
color:white;
padding:5px 10px 0 10px;
position:relative;
word-wrap:break-word;
margin-bottom:2em;
margin-left:20px;
-webkit-box-shadow:3px 3px 0 rgba(0,0,0,.3), inset 0 2px 2px rgba(253,116,84,.9);
box-shadow:3px 3px 0 rgba(0,0,0,.3), inset 0 2px 2px rgba(253,116,84,.9);
border-bottom:solid 1px;
border-bottom-color:#fd7454;
border-top:solid 1px;
border-top-color:#f11d1a;
}

.div2:after { 
content:'';
display:block;
position:absolute;
top:-.05em;
left:-2.16em; 
width:0;
height:0;
border-color: transparent #fc1e10 transparent transparent;
border-style: solid;
border-width: 1.14em;
}

助けてください!

4

1 に答える 1

-1

:after である必要がありますか? div 内のスパンにすることはできますか?

于 2012-12-04T05:07:46.417 に答える