一尘不染

显示的CSS3边界半径:表格行元素

css

这是我的布局:

<div class="divContainer">
        <div class="item">
            <div class="itemHeader"></div>
            <div class="itemBody"><div>
            <div class="itemFlag"></div>
        </div>
        ....
</div>

和CSS:

.divContainer{
    display:table;
    border-spacing:0 5px; //bottom spacing
    width:100%;
}

.item{
    display:table-row;
    height:45px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
}

.itemHeader, .itemBody, .itemFlag{
    display:table-cell;
}

.itemHeader{
    width:100px;
}

.itemBody{
    width:150px;
}

.itemFlag{
    width:20px;

}

圆形边框不会出现在item元素上。
如果我将它们分别放入itemHeaderitemFlag它们会出现。
但我真的很想清除一些代码并将其放入item

也无法获得半径以在divContainer班上工作。我想要一个包含圆形行的圆形容器。

问题是什么?也许CSS的另一部分搞砸了,但事实并非如此。


阅读 204

收藏
2020-05-16

共1个答案

一尘不染

恐怕这无法在表格行上应用边框半径。但是,解决方法非常简单:只需将背景颜色和边框半径应用于单元格即可。

如果您从表格行中删除背景色,则可以添加以下内容:

.item > div {
  background-color: #ccc;
}

.item > div:first-child {
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
}

.item > div:last-child {
  border-radius: 0 10px 10px 0; 
  -moz-border-radius: 0 10px 10px 0;
}

即使您更改班级名称,它也将起作用。

2020-05-16