blocks|key|4621101|text|使用常规空格或&nbsp;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4621102|http://jsfiddle.net/Quadraxas/hsQ24/5/|4621103|entityMap|0|LINK|mutability|MUTABLE|url^0|7|6|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>Use regular spaces or <code>&amp;nbsp;</code></p>

<p><a href="http://jsfiddle.net/Quadraxas/hsQ24/5/" rel="nofollow">http://jsfiddle.net/Quadraxas/hsQ24/5/</a></p>


blocks|key|4621043|text|您可以使用填充|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4621044|span+{
++++padding-left:+5px;
++++padding-right:+5px;
}|code-block|syntax|javascript|4621045|..or只是填充--对。|4621046|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use padding</p>

<pre><code>span {
    padding-left: 5px;
    padding-right: 5px;
}
</code></pre>

<p>..or just padding-right.</p>


blocks|key|115292|text|如果您只想要特定元素前空格，请为其指定一个类和样式，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|115293|<div+id="header">
++++<span>Help</span>
++++<span+class="feedback">Feedback</span>
++++<span>help</span>
</div>|code-block|syntax|javascript|115294|#header{
++++background-color:red;
}

.feedback+{
++++margin-left:+1em;
}|115295|更新示例：http://jsfiddle.net/hsQ24/4/|offset|length|115296|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hsQ24/4/^0|0|0|0|5|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>If you just want space before that specific element, give it a class and style that:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;span&gt;Help&lt;/span&gt;
    &lt;span class="feedback"&gt;Feedback&lt;/span&gt;
    &lt;span&gt;help&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>#header{
    background-color:red;
}

.feedback {
    margin-left: 1em;
}
</code></pre>

<p>Updated example: <a href="http://jsfiddle.net/hsQ24/4/" rel="nofollow">http://jsfiddle.net/hsQ24/4/</a></p>


blocks|key|115298|text|span+{
++++padding-right:+50px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|115299|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>span {
    padding-right: 50px;
}
</code></pre>


blocks|key|4621126|text|如果你不使用div来“存储”菜单，我认为&nbsp是你搜索的最好的答案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4621127|http://jsfiddle.net/AlphaCrack/hsQ24/8/|4621128|entityMap|0|LINK|mutability|MUTABLE|url^0|K|5|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>I think <code>&amp;nbsp</code> is the best answer for what you're searching, if you don't use divs to "store" that menus.</p>

<p><a href="http://jsfiddle.net/AlphaCrack/hsQ24/8/" rel="nofollow">http://jsfiddle.net/AlphaCrack/hsQ24/8/</a></p>


blocks|key|4621190|text|将元素包装在容器中，然后使用CSS+GRID、course，然后使用为特定目的而创建的grid-gap:value|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4621191|​|4621192|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;
}|code-block|syntax|javascript|4621193|<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>|4621194|4621195|对于您的问题，您应该使用row示例|4621196|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/complete-guide-grid/|1|https://cssgrid.io/^0|17|E|E|8|0|N|6|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]|$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

<p>Wrap your elements inside a container then use <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noreferrer">CSS GRID</a>, <a href="https://cssgrid.io/" rel="nofollow noreferrer">course</a> and then use <code>grid-gap:value</code> that was created for your that specific purpose</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inrow"&gt;
  &lt;span&gt;1&lt;/span&gt;
  &lt;span&gt;2&lt;/span&gt;
  &lt;span&gt;3&lt;/span&gt;
&lt;/div&gt;
&lt;div class="inColumn"&gt;
  &lt;span&gt;4&lt;/span&gt;
  &lt;span&gt;5&lt;/span&gt;
  &lt;span&gt;6&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>As for your problem, you should use the row example</p>


blocks|key|115456|text|对于父div|type|unstyled|depth|inlineStyleRanges|entityRanges|data|115457|display:+inline-table;|code-block|syntax|javascript|115458|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>for parent div </p>

<pre><code>display: inline-table;
</code></pre>


<p>I need to insert a dummy space between multiple span elements. ie; Need to insert a space between "Help" and "Feedback"</p>

<p>How can I do that?</p>

<p><a href="http://jsfiddle.net/hsQ24/" rel="nofollow">http://jsfiddle.net/hsQ24/</a></p>

<p>HTML</p>

<pre><code>&lt;div id="header"&gt;
    &lt;span&gt;Help&lt;/span&gt;
    &lt;span&gt;   &lt;/span&gt;
    &lt;span&gt;Feedback&lt;/span&gt;
    &lt;span&gt;help&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#header{
    background-color:red;
}
</code></pre>


Need to insert space between inline elements

容器

我需要在多个span元素之间插入一个虚拟空间。需要在“帮助”和“反馈”之间插入一个空格我该怎么做呢？HTML<div id="header">    <span>Help</span>    <span>   </span>    <span>Feedback</span>    <span>help</span></div>CSS#header{    background-color:red;

问需要在行内元素之间插入空格
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要在行内元素之间插入空格EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要在行内元素之间插入空格
EN