对聚合物Web组件进行样式化 | 对聚合物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 属性

演示：

这篇关于对聚合物Web组件进行样式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！