Question

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

我该怎么做？

HTML

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

CSS

#header{
    background-color:red;
}

Answer 1

您也可以使用: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 链接。

Answer 2

左右span元素margin：

#header span {
    margin: 0 10px;
}

JSFiddle demo

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

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

JSFiddle demo

或者，您可以修改HTML，为第一个span元素class提供一个:first-child，而不是{{1}}选择器。

Answer 3

您可以使用填充

span {
    padding-left: 5px;
    padding-right: 5px;
}

..或只是填充右边。

Answer 4

使用常规空格或 

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

Answer 5

如果您只想在该特定元素之前留出空格，请为其指定一个类和样式：

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

#header{
    background-color:red;
}

.feedback {
    margin-left: 1em;
}

更新示例：http://jsfiddle.net/hsQ24/4/

Answer 6

span {
    padding-right: 50px;
}

Answer 7

我认为&nbsp是您搜索内容的最佳答案，如果您不使用div来“存储”该菜单。

http://jsfiddle.net/AlphaCrack/hsQ24/8/

Answer 8

将您的元素包装在容器中，然后使用CSS GRID，course，然后使用为此特定目的创建的grid-gap:value

＆＃13;

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}

＆＃13;

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

＆＃13;

至于你的问题，你应该使用行示例

Answer 9

父级

display: inline-table;

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

9 个答案: