html - 取消 css 填充

Question

看似奇怪的问题，但我似乎不知所措。我有一个菜单，用户可以在其中选择页面上元素之间的间距。为此，我使用了不同大小的填充列表。像这样..

"Padding" : {
    "extendsValue" : "Css",
    "value" : "padding",
    "inputType" : "select",
    "selectOptions" : [
      { "value" : "auto", "display" : "0px" },
      { "value" : "10px", "display" : "10px" },
      { "value" : "20px", "display" : "20px" },
      { "value" : "30px", "display" : "30px" },
      { "value" : "40px", "display" : "40px" },
      { "value" : "50px", "display" : "50px" },
      { "value" : "60px", "display" : "60px" },
      { "value" : "70px", "display" : "70px" },
      { "value" : "80px", "display" : "80px" },
      { "value" : "90px", "display" : "90px" },
      { "value" : "100px", "display" : "100px" },
      { "value" : "150px", "display" : "150px" },
      { "value" : "200px", "display" : "200px" },
      { "value" : "250px", "display" : "250px" },
      { "value" : "300px", "display" : "300px" },
      { "value" : "350px", "display" : "350px" },
      { "value" : "400px", "display" : "400px" },
      { "value" : "450px", "display" : "450px" },
      { "value" : "500px", "display" : "500px" }
    ],
}

我的问题似乎是当他们选择 0px 时，即使我将它设置为自动，它仍然将填充设置为 0。这导致居中问题。理想情况下，当他们选择 0 时，我希望内联填充消失并采用我已经存在的样式。

有什么办法吗？我已经尝试过 null 或只是将其留空，但它总是只想将其设置回 0。我不希望我的填充为 0。

Answer 1

不确定您如何使用下拉菜单，但这是一个想法。

而不是做 style = "padding:[value]" 你可以像这样做整个 style = [value]:

"selectOptions" : [
  { "value" : "padding: 0px", "display" : "0px" },
  { "value" : "padding: 10px", "display" : "10px" },
  { "value" : "padding: 20px", "display" : "20px" },
  { "value" : "padding: 30px", "display" : "30px" },...

如果需要，您甚至可以为其他样式添加异常(exception)情况，例如:

 "selectOptions" : [
      { "value" : "padding: 0px; display: inline", "display" : "0px" },
      { "value" : "padding: 10px", "display" : "10px" },
      { "value" : "padding: 20px", "display" : "20px" },
      { "value" : "padding: 30px", "display" : "30px" },...