Question

在以下非常简单的html中，我无法将我的无序列表的边距/边框/边距设置为默认值以外的任何值。我已经尝试过“ 5em”，“ 50em”，“ 100px” ...没有任何效果。

Chrome浏览器的“开发人员工具”窗口显示了我的CSS，但使用的是划线字体。我知道这意味着我的CSS已被某些内容覆盖。但是凭什么呢？该文件本身的优先级可能比普通指令的优先级高？

我知道我不需要摆弄页边距，边框和填充来获得我想要的内容（无非是超宽的左缩进），而是在 margin之后：“ 0 0 0 5em” 失败了，我试图查看任何内容是否有效。

selbox.on('pretransition', function() {
  selbox.select('option[value=""]').remove();
});

Answer 1

您在CSS中使用的所有值均无效，因此由于浏览器无法理解而被删除。

请参见下文，我已经调整了值。首先，它们都不能被引用；仅引用某些值，例如单个值中有空格时。

对于padding和margin，如果所有4个值都相同，则只需要一个值，否则：

两个值分别影响vertical和horizontal
三个值会影响top，horizontal，然后影响bottom
四个值会影响top，right，bottom，然后影响left

但是对于Border，它使用3个值定义所有4个边界： -宽度（1em，5px等），用于定义线的宽度 -线型（实线，虚线等） -颜色（#FFF，rgba(255,200,0,1)）

要影响单个边框，您需要使用border-top，border-right，边框底部, border-left`。

编辑：我建议您查看一些文档。我个人更喜欢MDN（Mozilla开发人员网络）：

<!DOCTYPE html>

<head>
  <style>
    ul li {
      margin: 1em;
      border: 1em solid #000;
      padding: 1em;
    }
  </style>
</head>

<body>
  <ul>
    <li> foo </li>
    <ul>
      <li> a </li>
      <li> b </li>
      <li> c </li>
    </ul>
    <li> bar </li>
  </ul>
</body>

</html>

Answer 2

从CSS属性中删除引号：

ul li {
    margin: 5em;
    border: 5em solid #FF0000
    padding: 5em;
}

请注意，如果要使用相同的值4次，则只能将其写一次作为快捷方式。并注意边界值的设置方式。

CSS边距/边框/填充对LI项目没有任何影响

2 个答案: