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

样式化聚合物Web组件

1 个答案: