HTML DIV inline-block的

我有这样的代码：HTML DIV inline-block的

<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>

这给了我下面的输出：http://jsfiddle.net/VmBR7/

我想知道我怎么能做出3个div的是直列没有这种一种边界。我一直在寻找样式选项，但找不到任何可以产生该样式的选项。谢谢

来源

2013-04-02 FábioMartinho

首先：不要使用inline（样式属性）样式。它变得混乱，以后很难改变。改为在头部或外部样式表中使用内部样式表。 –

'和'bgcolor'在HTML 4.01中弃用，我建议不要在新项目中使用它们。 –

感谢您的提示。我没有在我正在做的项目中使用bgcolor，只是用它来使div可见 –

内嵌块元素呈现自己的边框。此，可以发现here

为了acheive所需的I去除从div元件inline-block显示属性和而不是将它们制成float:left

然后我包裹所有的有底部div elemets到父div其使用类似的造型作为顶级div元素

使用内嵌样式也不可取我重构一些..

因此，这里是JSFIDDLE

来源

2013-04-02 18:20:41 Usha

谢谢。这是真的。 :) –

HTML DIV inline-block的

回答

相关问题