这是我的布局:
<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
也无法使半径在divContainer
类上工作。我想要一个包含圆形行的圆形容器。
有什么问题?也许CSS的另一部分搞砸了,但事实并非如此。
答案 0 :(得分:22)
我担心这无法在表格行上应用边框半径。但是,解决方法非常简单:只需将背景颜色和边框半径应用于单元格。
如果从表格行中删除背景颜色,则可以添加:
.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;
}
即使您更改了班级名称,它也会有效。
你可以在这里看到它: http://jsfiddle.net/jaSs8/1/
答案 1 :(得分:1)
你也可以通过设置float:left来解决这个问题。在表元素上。它不会影响表灵活性的行为,并且像魅力一样。
table {
float: left;
display: table;
width: 100%;
border-collapse: collapse;
}
tr {
display: table-row;
width: 100%;
padding: 0;
}
td {
font-weight: bold;
background: #fff;
display: table-cell;
border-radius: 10px;
}
答案 2 :(得分:0)
问题可能出在divContainer类中。尝试将display属性更改为table-row。