Html 如何并排放置 <span> 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23715441/
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 place <span> elements side by side?
提问by user3648348
I have a small problem with these <span>elements in a <div>.
我<span>在<div>.
http://jsfiddle.net/kkzLW/179/
http://jsfiddle.net/kkzLW/179/
Here is the section of CSS code that I'm working with:
这是我正在使用的 CSS 代码部分：
.rightRapper {
border-style: dotted;
margin-left: 105px;
margin-top: 0px;
height: 90px;
width: 100px;
display: block;
}
.leftRapper {
border-style: dotted;
margin-left: 0px;
height: 90px;
width: 100px;
display: block;
}
Here is the HTML section:
这是 HTML 部分：
<div id="battleBox">
<span class="leftRapper">
<span id="buttonColumn">
<span id="container3" class="topButton">
<a href="" id="linktomouseover">+</a>
</span>
<span id="container4" class="bottomButton">
<a href="" id="linktomouseover2">-</a>
</span>
</span>
</span>
<span class="rightRapper">
<span id="buttonColumn">
<span id="container" class="topButton">
<a href="" id="linktomouseover3">+</a>
</span>
<span id="container2" class="bottomButton">
<a href="" id="linktomouseover4">-</a>
</span>
</span>
</span>
</div>
I'm trying to get the <span>.leftRapperand .rightRapperto be side by side in the <div>battleBox. However, when I set the CSS displayproperty to inline, the <span>sget squished into a smaller shape for some reason. When I set the displayto block, it turns them into the size I want but it doesn't display them the way I want, because they're not displayed inline.
我试图让<span>.leftRapper与.rightRapper是并排的<div>battleBox。但是，当我将 CSSdisplay属性设置为 时inline，由于<span>s某种原因，它会被压缩成更小的形状。当我将 设置为display时block，它会将它们变成我想要的大小，但它不会以我想要的方式显示它们，因为它们没有内嵌显示。
What is causing the <span>sto have a smaller size?
是什么导致<span>s尺寸变小？
回答by potashin
Add or replace the properties below in the following CSS classes/selectors:
在以下CSS 类/选择器中添加或替换以下属性：
#battleBox {
width: 216px; /* increasing width from 210 to 216 because your border takes 6 extra px*/
}
.rightRapper {
margin: 0px; /* remove all margins to fit two divs in the container */
display: inline-block; /* display block elements in one line */
}
.leftRapper {
margin: 0px;
display: inline-block;
}
回答by user1704029
You could/should add a float: leftto .leftRapper.
你可以/应该添加一个float: left到.leftRapper.
Other options are e.g. adding a negative right margin to .leftRapper.
其他选项是例如添加一个负的右边距.leftRapper。
