造型聚合物 Web 组件

Question

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

<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>

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

到目前为止，我不必为我的原型使用任何 css，现在复选框正在破坏一切。

Answer 1

一点填充就可以了：

<style>
  #container > div {
    padding: 12px;
  }
</style>

<div layout vertical id="container">
  <div layout horizontal center>
    ...
  </div>
  <div layout horizontal center>
    ...
  </div>
  ...
</div>

我还使用了center 属性来垂直对齐每一行的项目。

演示：http://jsbin.com/pobiyawu/1/edit