如何将CSS样式应用于网格中的整行？
如何将CSS样式应用于网格中的整行？
提问于 2019-01-26 11:36:42
我有一个包含行和列的网格，每一行形成一种节。我想对每一行应用一个阴影，但不对行的每个元素应用阴影。我想整排都做。
我试图将行封装在一个"div“中，但它解构了网格的结构(除非我们使用"display: content”，但它不能应用阴影)。
我想知道是否可以在不破坏网格结构的情况下封装网格的元素？
一排我的网格的图片 (我想在白色块上应用一个阴影)。
可能看起来是这样的：
HTML:
<div class="row-wrapper">
<div class="column1"></div>
<div class="column2"></div>
<div class="column3"></div>
</div>CSS
.row-wrapper{
box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-27 07:22:13
免责声明:猜测您正在使用css-grid.。
要旨：
<style>
.header { grid-area: header; margin: 0.5rem; padding: 0.5rem; }
.label-1 { grid-area: label-1; }
.value-1 { grid-area: value-1; }
.label-2 { grid-area: label-2; }
.value-2 { grid-area: value-2; }
.action { grid-area: action; }
.row {
display: grid;
grid-template-areas:
"header header header header header header header"
"label-1 value-1 value-1 label-2 value-2 value-2 action";
background-color: whitesmoke;
}
.rows, .row {
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1),
0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
border-radius: 0.5rem; margin: 0.5rem; padding: 0.5rem;
}
</style>
<div class="rows">
<div class="header">Data</div>
<div class="row">
<div class="label-1"><label for="r1mass">Mass</label></div>
<div class="value-1"><input id="r1mass" type="text" /></div>
<div class="label-2"><label for="r1species">Species</label></div>
<div class="value-2"><input id="r1species" type="text" /></div>
<div class="action"><button>+</button></div>
</div>
<div class="row">
<div class="label-1"><label for="r2mass">Mass</label></div>
<div class="value-1"><input id="r2mass" type="text" /></div>
<div class="label-2"><label for="r2species">Species</label></div>
<div class="value-2"><input id="r2species" type="text" /></div>
<div class="action"><button>+</button></div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54382024
复制相关文章
相似问题
腾讯云开发者
