样式聚合物Web组件

Question

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.

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

Answer 1

A little padding does the trick:

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

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

I've also used the center attribute to vertical align the items on each row.

Demo: http://jsbin.com/pobiyawu/1/edit