需要在内联元素之间插入空格

Question

我需要在多个span元素之间插入一个虚拟空间。即 需要在“帮助”和“反馈”之间插入一个空格

我怎样才能做到这一点？

http://jsfiddle.net/hsQ24/

的HTML

<div id="header">
    <span>Help</span>
    <span>   </span>
    <span>Feedback</span>
    <span>help</span>
</div>

的CSS

#header{
    background-color:red;
}

Answer 1

给你的span元素 left 和 right margin：

#header span {
    margin: 0 10px;
}

JSFiddle 演示。

如果您只想在第一个和第二个span元素之间添加一个空格（在您的示例中忽略空的），您可以使用:first-child选择器仅应用于margin-right第一个span：

#header :first-child {
    margin-right: 20px;
}

JSFiddle 演示。

或者，您可以修改您的 HTML 以提供您的第一个span元素 a class，它可以代替:first-child选择器使用。

Answer 2

您也可以使用:before伪元素。检查演示。

像CSS

span:before{
    content:" "; 
    display:inline-block; 
    width:32px;
}

HTML代码

<div id="header">
    <span>Help</span>
    <span>   </span>
    <span>Feedback</span>
    <span>help</span>
</div>

另外，如果需要删除不必要的跨度，可以使用 :nth-of-type

#header span:nth-of-type(2)
{
  display:none;
  background-color:green;
}

另一个JSBin链接。