Question

这就是CSS规则的样子：

.button {
    display: block;
    padding: 2% 0 2% 0;
    background-color: green;
    position: absolute;
    margin-top: 30%;
    margin-left: 14.5%;
    margin-right: 14.5%;
    width: 75%

}

当我添加border-radius: 5px;时，它会折叠，并且不会应用边框半径。是否与position: absolute或display: block发生冲突？提前致谢。

Before

After

Answer 1

您是在width: 75%声明后添加吗？

    width: 75%
    border-radius: 5px;
}

如果是这样，您可能忘记在width: 75%之后添加分号。当它不存在时，width按预期工作，因为它是最后一个声明，但在您尝试在其下面添加border-radius声明后，缺少的分号会产生语法错误，导致两个属性都中断。 / p>

导致元素折叠的原因是因为position: absolute导致元素缩小以适应其内容（如果没有应用宽度），而通常它会像容器允许的那样拉伸。

为什么添加border-radius会折叠此div的宽度？

1 个答案: