Question

我使用css border: 1px solid #333创建一个空的span，但没有看到任何有效的分隔符。我认为跨度内必定有什么东西？如何用空标签创建边框？ hr标签太丑了。

Answer 1

您必须给它一个大小，并将其显示为一个块。试试这个。

span.separator {
    border-top: 1px solid #333;
    width: 100%;
    height: 1px;
    display: block;
}

Answer 2

如果您使用hr并使用border: 0;，

border-top: 1px solid #000;标签并不难看，hr的3D样式只是由浏览器应用，您可以改变方式我建议。

hr {
   border: 0;
   border-top: 1px solid #000;
   margin: 10px auto; /* For vertical spacing */
}

我建议您使用<hr />作为语义，它会为您的页面赋予意义，并且还会在源代码中为您节省少量字符。

其次关于span标记，它是一个inline标记，要跨越它100%，您需要将其display: block;。

span.separator {
   border-top: 1px solid #000;
   display: block;
   margin: 10px auto; /* For vertical spacing */
}

有关inline span的详情，请参阅我的回答here。

Answer 3

span不是块元素，为了得到你想要的东西，你必须给它一个高度并将其设置为display：block或inline-block。如果您希望边框仅在一侧，则可以使用border-right或border-left;

test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test