Html 如何使用 CSS 将两个跨度合并为一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4521024/
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
How to wrap two spans into one line with CSS
提问by SUN Jiangong
I want to wrap two spansin one line with CSS.
我想spans用 CSS将两个包装在一行中。
Here is my code:
这是我的代码：
<div style="width:60px;">
<span id="span1" style="float:left; display:inline;"></span>
<span id="span2" style="float:left; display:inline; "></span>
</div>
But it doesn't work.
但它不起作用。
How to do that?
怎么做？
Edit:
编辑：
I want to use the "id", either use divor span, I just want them to be in one line.
我想使用“id”，要么使用div要么span，我只希望它们在一行中。
When I just use spanwithout style, the content are not in the same line. The second line will go down.
当我只使用span不带样式时，内容不在同一行。第二行将下降。
回答by Pradeep Singh
Here is the working example:
这是工作示例：
<div style="float:left;">
<span style="display:inline; color: red;">First Span</span>
<span style="display:inline; color: blue;">Second Span</span>
</div>回答by jbwharris
The float will mess things up. Usually with a float to work you need a width with it as well. It can't float them against each other because it doesn't know how much space each span will occupy in relation to the div. Spans are inherently inline elements unless you define them otherwise, so they should just display that way without the float.
浮动会把事情搞砸。通常使用浮点数来工作，你也需要一个宽度。它不能让它们相互浮动，因为它不知道每个跨度相对于 div 将占据多少空间。除非您以其他方式定义它们，否则跨度本质上是内联元素，因此它们应该在没有浮动的情况下以这种方式显示。
回答by Manudeep
<div style="float:left;">
<span style="display:contents; color: red;">First Span</span>
<span style="display:contents; color: blue;">Second Span</span>
</div>'display:contents' Makes the container disappear, making the child elements children of the element the next level up in the DOM which I believe is the right answer.
'display:contents' 使容器消失，使元素的子元素成为 DOM 中的下一个级别，我认为这是正确的答案。
Another way which works on ie too is this:
另一种适用于 ie 的方法是：
<div style="float:left; display:flex;">
<span style="color: red;">First Span</span>
<span style="color: blue;">Second Span</span>
</div>回答by Yuvraj Patil
In some cases display:inlinedoes not work, in such case try adding both spans in one parent span like below
在某些情况下display:inline不起作用，在这种情况下尝试在一个父跨度中添加两个跨度，如下所示
<span>
<span id="span1">Span 1</span>
<span id="span2">Span 2</span>
</span>
回答by Samuel
It's the float left that is causing it to be on separate lines. Maybe try a (non breaking space) in between the spans.
是浮动左侧导致它位于不同的行上。也许 在跨度之间尝试一个（非中断空间）。
回答by haha
Overflow maybe?
可能溢出？
<div style="width:60px; overflow:hidden;">
<div style="width:60px; overflow:hidden;">
回答by Spudley
The floatand displaystyles are mutually exclusive, so there's no point using them together. Also <span>defaults to display:inline;so that's redundant anyway (unless you have some other style elsewhere setting them to something else?).
该float和display风格是互斥的，所以有使用它们在一起没有意义。也<span>默认为display:inline;这样，无论如何这都是多余的（除非您在其他地方有其他样式将它们设置为其他样式？）。
