Html 需要在行内元素之间插入空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23894544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need to insert space between inline elements
提问by user1050619
I need to insert a dummy space between multiple span elements. ie; Need to insert a space between "Help" and "Feedback"
我需要在多个跨度元素之间插入一个虚拟空间。IE; 需要在“帮助”和“反馈”之间插入一个空格
How can I do that?
我怎样才能做到这一点？
HTML
HTML
<div id="header">
<span>Help</span>
<span> </span>
<span>Feedback</span>
<span>help</span>
</div>
CSS
CSS
#header{
background-color:red;
}
回答by Kheema Pandey
you can use :beforepseudo element as well. Check the DEMO.
您也可以使用:before伪元素。检查演示。
CSS like
CSS 喜欢
span:before{
content:" ";
display:inline-block;
width:32px;
}
HTML Code
HTML代码
<div id="header">
<span>Help</span>
<span> </span>
<span>Feedback</span>
<span>help</span>
</div>
In Addition if need to remove unnecessary span you can use :nth-of-type
此外，如果需要删除不必要的跨度，您可以使用 :nth-of-type
#header span:nth-of-type(2)
{
display:none;
background-color:green;
}
Another JSBinlink.
另一个JSBin链接。
回答by James Donnelly
Give your spanelements left and right margin:
给你的span元素 left 和 right margin：
#header span {
margin: 0 10px;
}
If you're wanting to only add a space between the first and second spanelements (ignoring the empty one in your example), you can make use of the :first-childselector to apply margin-rightto the first spanonly:
如果您只想在第一个和第二个span元素之间添加一个空格（在您的示例中忽略空的），您可以使用:first-child选择器仅应用于margin-right第一个span：
#header :first-child {
margin-right: 20px;
}
Alternatively you can modify your HTML to give your first spanelement a classwhich can be used instead of the :first-childselector.
或者，您可以修改您的 HTML 以提供您的第一个span元素 a class，它可以代替:first-child选择器使用。
回答by Quad
回答by Andy G
You can use padding
您可以使用填充
span {
padding-left: 5px;
padding-right: 5px;
}
..or just padding-right.
..或者只是填充正确。
回答by Paul Roub
If you just want space before that specific element, give it a class and style that:
如果您只想在该特定元素之前留出空间，请为其指定一个类和样式：
<div id="header">
<span>Help</span>
<span class="feedback">Feedback</span>
<span>help</span>
</div>
#header{
background-color:red;
}
.feedback {
margin-left: 1em;
}
Updated example: http://jsfiddle.net/hsQ24/4/
更新示例：http: //jsfiddle.net/hsQ24/4/
回答by TheBokiya
span {
padding-right: 50px;
}
回答by Victor
I think  is the best answer for what you're searching, if you don't use divs to "store" that menus.
 如果您不使用 div 来“存储”该菜单，我认为这是您搜索内容的最佳答案。
回答by John Balvin Arias
Wrap your elements inside a container then use CSS GRID, courseand then use grid-gap:valuethat was created for your that specific purpose
将您的元素包裹在一个容器中，然后使用CSS GRID，当然，然后使用grid-gap:value为您的特定目的而创建的
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;
}<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>As for your problem, you should use the row example
至于您的问题，您应该使用行示例
回答by Siviy
for parent div
对于父 div
display: inline-table;
