Question

我有一个非常奇怪的问题。我的目标是创建3个等宽跨度。前两个有一个内部右边填充，最后一个没有。这是我的代码：

HTML

<div class="span1of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus nibh, sagittis vitae pharetra at, varius venenatis justo.</div>
<div class="span1of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus nibh, sagittis vitae pharetra at, varius venenatis justo.</div>
<div class="span1of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus nibh, sagittis vitae pharetra at, varius venenatis justo.</div>

CSS

.span1of3 {
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
    margin-right:-4px;
    border:1px solid red;
}
.span1of3 {
    width:33.3%;
    padding-right:50px;
}

.span1of3:last-of-type{
    padding-right:0px;
    background-color:red;
}

当我刷新页面时，我立即看到最后一个跨度红色背景，它立即变为空白。我确信我正在为span1of3创建一个通用样式，然后指定最后一个跨度的特定内容，但它不起作用。为什么呢？

编辑

这是完整的HTML代码（span.css已经完全粘贴在上面）

<!DOCTYPE html>
<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>


        <link rel="stylesheet" href="http://localhost/base/css/span.css" media="all" type="text/css" />
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />

</head>

<body itemscope itemtype="http://schema.org/WebPage">


    <div class="span1of3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus nibh, sagittis vitae pharetra at, varius venenatis justo. 
    </div>
    <div class="span1of3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus nibh, sagittis vitae pharetra at, varius venenatis justo. 
    </div>
    <div class="span1of3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus nibh, sagittis vitae pharetra at, varius venenatis justo. 
    </div>

</body>
</html>

Answer 1

根据j98691的宝贵评论，我建议使用以下代码

<div id="spanned">
    <span></span>
    <span></span>
    <span></span>
</div>

然后CSS将是

#spanned span {
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
    margin-right:-4px;
    border:1px solid red;
    width:33.3%;
    padding-right:50px;
}

#spanned span:last-of-type{
    padding-right:0px;
    background-color:red;
}

编辑：

你的CSS违反了标准。

虽然您使用:last-of-type并在某些浏览器中工作，但标准是您在元素而不是类上使用它。

现在在html，css，浏览器世界中，你必须尽可能地遵循约定和标准，否则你无法预测不同浏览器的响应和行为。

我的解决方案（实际上j98691 solution）是对元素（即:last-of-type元素）使用span，并将这三个元素括在父div中。

我希望它很清楚。

Answer 2

j08691是对的。 last-of-type，nth-of-type，nth-child适用于元素，因此如果你想要这种行为，你应该把你的列包装在另一个元素中并使用：last-child。这样会更可靠。

最后一种类型未应用

2 个答案: