Question

我有如下所示的标记：

<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：
约翰米勒 St. JJ Street
+ 1-56565656 |编辑链接

案例2：
约翰米勒 St. JJ Street |编辑链接

请告诉我如何使用CSS实现此目的。非常感谢任何帮助
我不允许使用 CSS3 ，因为IE的较低版本不支持

Answer 1

更新答案：

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

我对您的span做了一些小改动，我刚刚将您的元素包裹在HTML div

中

<强> HTML：

container

我还在<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标记，否则布局将会混乱。

<强> CSS：

Last Name

这将选择第二个最后一个元素并对其应用样式。

<强> See Working Demo.

我希望它可以帮到你。

显示Span元素在没有CSS3的情况下有条件地内联Div元素

1 个答案: