6

我有这个 CSS：

#center{
    display:table-row;
    border:solid #55A 1px;
    background-color:#AAF;
    height:100%;
}

实际上，border 属性只是被忽略了。为什么？我该如何解决？
演示
谢谢

4

3 回答 3

9

表格行不能有边框。表格行中的单元格可以，但行本身不能。

于 2012-06-04T15:12:11.423 回答
2

如果将“单元格”添加到表格行，例如：

<div id="content">
    <div id="top">TOP</div>
    <div id="center">
        <div>CENTER</div>
    </div>
</div>​

然后下面的 CSS 工作：

#center{
    display:table-row;
}
#center > div {
    display: table-cell;
    border:solid #55A 1px;
    background-color:#AAF;
    height:100%;
}

JS 小提琴演示。

重要的是要记住，浏览器会按照您的指示渲染元素；因此，如果您告诉 a div，display: table-row 它将以这种方式显示；并且 atable-row没有 a border。table-cell但是，确实如此，这就是为什么我添加了孩子div并为其分配了该display属性。

于 2012-06-04T15:15:58.357 回答
-1

CSS

#content{
    display:table;
    border:solid black 1px;    
    width:250px;
    height:300px;
}
.center{
    display:table-row;
}
.center > div {
    display: table-cell;
    border:solid #55A 1px;
    background-color:#AAF;

}
#top{      
  border:solid red 1px;
}

HTML

<div id="content">
    <div class="center" style="height:50px">
        <div id="top">TOP</div>
    </div>
    <div class="center" style="height:100%">
        <div>CENTER</div>
    </div>
    <div class="center" style="height:50px">
        <div>BOTTOM</div>
    </div>
</div>

demo

于 2012-06-04T15:24:59.223 回答