HTML DIV 内联块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15770739/
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
HTML DIV inline-block
提问by FábioMartinho
I have this code:
我有这个代码：
<div style="margin-top: 5px"></div>
<div style="width:175px; height: 25px; margin: 0 auto; background-color:#fff;">
<div style="font-weight: bold; text-align: center; width: 175px; height: 50px; margin:0; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; border:0; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
Top 5 Números Sorteados
</div>
</div>
<center>
<div style="margin-top: 1.5px"></div>
<div style="display:inline-block; width:55px; height: 100%; background-color:#fff; ">
<div style="font-weight: bold; text-align: center; width: 55px; height: 100%; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<p>1.</p>
<p>2.</p>
<p>3.</p>
<p>4.</p>
<p>5.</p>
</div>
</div>
<div style="display:inline-block; width:56px; height: 100%; background-color:#fff; ">
<div style="font-weight: bold; text-align: center; width: 56px; height: 100%; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<p>1.</p>
<p>2.</p>
<p>3.</p>
<p>4.</p>
<p>5.</p>
</div>
</div>
<div style="display:inline-block; width:55px; height: 100%; background-color:#fff; ">
<div style="font-weight: bold; text-align: center; width: 55px; height: 100%; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<p>1.</p>
<p>2.</p>
<p>3.</p>
<p>4.</p>
<p>5.</p>
</div>
</div>
</center>
This gives me the following output: http://jsfiddle.net/VmBR7/
这给了我以下输出：http: //jsfiddle.net/VmBR7/
I'd like to know how can I make the 3 divs that are inline without that kind of a border. I've been searching for the style options but can't find anything that can produce that. Thanks
我想知道如何制作没有那种边框的内联 3 个 div。我一直在寻找样式选项，但找不到任何可以产生它的东西。谢谢
采纳答案by Usha
Inline-block elements render themselves with a border. This can be found here
内联块元素用边框呈现自己。这可以在这里找到
In order to acheive the required I removed the inline-blockdisplay property from the divelements and instead made them to float:left
为了达到要求，我inline-block从div元素中删除了display 属性，而是将它们设置为float:left
Then i wrapped all the there bottom divelemets into a parent divwhich uses a similar styling as the top divelement
然后我将所有底部div元素包裹到一个父元素中，该父元素div使用与顶部div元素类似的样式
Using inline styles is also not advisable i refactored some..
也不建议使用内联样式，我重构了一些..
So here is the JSFIDDLE
所以这里是JSFIDDLE
