Question

我希望每隔一行都是灰色的。它几乎可以工作，但在左侧和右侧，有一些像素白色。

有人知道为什么吗？

HTML

<div class="recent">
    <h1>Recent Downloads:</h1>
    <div class="row">test</div>
    <div class="row">test</div>
    <div class="row">test</div>
    <div class="row">test</div>
    <div class="row">test</div>
</div>

CSS

.recent {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30%;
    width: 35%;

background-color: white;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    border-style: solid;
    border-color: white;
}

.recent h1 {
    font-size: 16px;
    font-weight: normal;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.row {
    background-color: white;
}

.row:nth-child(odd) {
    background: #e0e0e0;
}

http://jsfiddle.net/C8drX/4/

Answer 1

您应该从.recent删除边框：

.recent {
    border: 0px;
}

并且可能会向.row添加一些填充：

.row {
    padding: 3px;
}

这是JSFiddle

Answer 2

.recent div的高度很小。我看待它的方式，你可以做以下四件事之一：

从.recent
增加.recent上的高度属性
从.recent-div
像Wil93 sugested一样，你可以从.recent删除边框并添加填充到.row

这是一个小提琴，我只是一起删除了高度：

（/*height:30%;*/）

JSFiddle

Answer 3

这是因为你已经设置了

border-color: white;

in

.recent {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30%;
    width: 35%;

    background-color: white;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    border-style: solid;
    border-color: white;
}

检查 Fiddle ，您将了解

您只需使用

删除它即可

border:none;

Answer 4

您还应该使用它，替换当前的css规则：

background-color: white;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
}

Answer 5

您的.recent div具有来自您的用户代理样式表的边框，因为您正在设置边框样式。将其设置为0并在.row div中使用填充。

HTML，CSS - div颜色的div

5 个答案: