对聚合物Web组件进行样式化 [英] Styling Polymer Web Components

问题描述

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

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

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

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