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

2018-06-04 21:58:29

我需要在多个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;
}

你也可以:before伪元素:before使用:before 检查DEMO 。

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链接。

给你的span元素左右margin ：

#header span {
    margin: 0 10px;
}

JSFiddle演示 。

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

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

JSFiddle演示 。

另外，您可以修改你的HTML给你的第一span元素的class可以用来代替:first-child选择。

使用常规空格或 

http://jsfiddle.net/Quadraxas/hsQ24/5/

链接地址: http://www.djcxy.com/p/15789.html