如何在.views-view-grid中的3列中的2列之间添加垂直边框

时间:2012-06-22 19:27:34

标签: drupal views border

我对这个Drupal事情有点新意,但我会尽力解释我的困境。我正在编辑一个网格边框的网站。我已经想出如何关闭网格周围的边框。我试图在第1列和第2列之间仅显示1条垂直线,在第2列和第3列之间仅显示1条垂直线。我想我可以在2列的一侧放置一个边框,或者创建一些规则,在列之间放置一条垂直线。

无论哪种方式,我都不太了解我的CSS,以实现这一点。

以下是我的视图现在的样子(网格边框关闭):[1]:http://i.stack.imgur.com/hnNVO.jpg

这是我当前的style.css代码:

    .views-view-grid td {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0px;
    width: 33%;
    }

    .views-view-grid tr {
    border-left: 0px solid #CCCCCC;
    border-right: 0px solid #CCCCCC;
    }

非常感谢任何帮助,建议或指示!

1 个答案:

答案 0 :(得分:0)

通过向所有< td> 元素提供 border-right ,然后将其从最后一个元素中删除,可以轻松完成此操作。

.views-view-grid td {
   border-right: 1px solid black;
}

Drupal通常会自动将类放在列表中的第一个和最后一个元素或类似的东西上。您可以使用这些类从最后一个元素中删除边框。我不知道它在使用网格时的表现如何,但由于您正在使用视图,因此您还可以使用HTML列表显示。如果您在< li> 元素上使用 float:left ,它的行为就像截图一样。

如果要保留当前设置,可以尝试使用伪选择器:

.views-view-grid td:last-child {
    border-right: none;
}