对聚合物Web组件进行样式化

本文介绍了对聚合物Web组件进行样式化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何设计或重构此列表，以便复选框的可点击区域不会相互干扰？ 是否有分组容器我不知道？

How would you go about styling or refactoring this list, so that the clickable areas of the checkboxes do not interfere with each other? Is there a grouping container I am not aware of?

<div layout vertical> <div layout horizontal> <paper-checkbox></paper-checkbox> <paper-item label="item 1"></paper-item> </div> <div layout horizontal> <paper-checkbox></paper-checkbox> <paper-item label="item 2"></paper-item> </div> <div layout horizontal> <paper-checkbox></paper-checkbox> <paper-item label="item 3"></paper-item> </div> </div>

复选框应与纸张项目的标签（如图标按钮中的图标）当然不会干扰对方或项目。

The checkboxes should be neatly aligned with the paper-item's label (like icons in an icon-button) and of course not interfering with each other or the item.

到目前为止，我没有使用任何css为我的原型，现在复选框是打破了一切。 p>

So far I didn't have to use any css for my prototype and now checkboxes are breaking everything.

推荐答案

一点点填充就是诀窍：

<style> #container > div { padding: 12px; } </style> <div layout vertical id="container"> <div layout horizontal center> ... </div> <div layout horizontal center> ... </div> ... </div>

我也使用了 center 属性

演示： jsbin/pobiyawu/1/edit