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：
John Miller
St. JJ 街 | 编辑链接

请让我知道如何仅使用 CSS 来实现。任何帮助将不胜感激
我不允许使用CSS3，因为较低版本的 IE 不支持它

4

1 回答 1

1

更新答案：

正如您所说，div User Mobile No在这种情况下您可能会或可能不会出现，我们可以利用CSS3 :nth-child将倒数第二个div's display属性设置为display:inline-block;.Thespan Edit Link是最后一个元素，因此倒数第二个元素的display属性应该是display:inline-block确保span出现在它旁边。

我对你做了一个小改动，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;
}

这将选择倒数第二个元素并对其应用样式。

请参阅工作演示。

我希望它对你有帮助。

于 2012-08-25T10:00:34.423 回答