边距右和宽度：100％导致滚动条出现在WordPress后端

Question

我正在为WordPress中的插件开发配置页面。我在<ul>元素中创建了一个<div>元素，并将其放在我的配置页面上。问题是，每当我将margin-right和width:100%应用于该div时，它都会导致滚动条出现，列表的宽度超出了页面的总宽度。正如您在屏幕截图底部看到的那样。

以下是我申请的唯一款式（LESS）：

div#pworks-popular-posts-list {
    display:block;
    margin:20px;
    width:100%;
    ul {
        width:100%;
        margin:0;
        background-color:white;
        li {
            display:block;
            div {
                display:inline-block;
            }
        }
    }
}

这是从Chrome开发工具中提取的HTML结构：

你能帮我解决这个问题吗？谢谢。

Answer 1

首先，您不需要width:100%;，因为display:block; div会默认填充其父级的宽度。但是，如果您出于某种原因（或者您打算将其设为display:inline-block;或其他内容）进行指定，则可以使用calc()这样的函数：width:calc(100% - 20px);。

Answer 2

发生的事情是您将div的宽度设置为正文的宽度。之后你移动它，这会导致你的div更进一步，导致溢出-X。

我不建议将块元素宽度设置为100％。块元素自动具有100％的父级宽度。

我会设置一个带padding: 20px;的容器div。

Answer 3

设置max-width:100%代替width:100%。 它将根据padding减小宽度。