2

以下に示すようなマークアップがあります。

<span>First Name</span>
<span>Last Name</span>
<div>User Address</div>
<div>User Mobile Number</div>
<span>Edit Link</span>

マークアップがページにレンダリングされるとき、最後のスパン (「リンクの編集」) が前の要素とインラインで表示されるようにします。「ユーザーの携帯電話番号」div はオプションです。ユーザーの選択に応じて、存在する場合と存在しない場合があります。要するに：

1）<div>User Mobile number</div>「リンクの編集」が存在する場合、それとインラインで来る必要があります。
2)<div>User Mobile number</div>が存在しない場合、「リンクの編集」は とインライン化する必要があり<div>User Address</div>ます。

期待される出力:

ケース 1:
ジョン ミラー
ストリート JJ ストリート
+1-56565656 | リンクを編集

ケース 2:
ジョン ミラー
ストリート JJ ストリート | リンクを編集

CSSのみを使用してこれを達成する方法を教えてください。

4

1 に答える 1

1

更新された回答:

その場合、div User Mobile No存在する場合と存在しない場合があると言うように、最後からCSS3 :nth-child2 番目のdiv's displayプロパティをdisplay:inline-block;.Theにすることができます。span Edit Linkdisplaydisplay:inline-blockspan

私はあなたに小さな変更を加えました。HTMLあなたの要素をdiv container

HTML:

<div id="container">
<span>First Name</span>
<span>Last Name</span>
<br/>

<div>User Address</div>
<div>User Mobile No</div>
<span>Edit Link</span>    
</div>

<br/>タグも追加しましたspan Last Name。そうしないと、レイアウトがめちゃくちゃになります。

CSS:

div#container div:nth-last-child(2)
{
display:inline-block;
}

これにより、最後から 2 番目の要素が選択され、スタイルが適用されます。

作業デモを参照してください。

お役に立てば幸いです。

于 2012-08-25T10:00:34.423 に答える