这是我的布局:
<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元素上。 如果我将它们分别放入itemHeader,itemFlag它们会出现。 但我真的很想清除一些代码并将其放入item
item
itemHeader
itemFlag
也无法获得半径以在divContainer班上工作。我想要一个包含圆形行的圆形容器。
divContainer
问题是什么?也许CSS的另一部分搞砸了,但事实并非如此。
恐怕这无法在表格行上应用边框半径。但是,解决方法非常简单:只需将背景颜色和边框半径应用于单元格即可。
如果您从表格行中删除背景色,则可以添加以下内容:
.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; }
即使您更改班级名称,它也将起作用。