无法从 div 中删除填充

Question

我有一个 <s:actionmessage /> 在成功执行操作时显示一条消息。

success.jsp:

<s:if test="hasActionMessages()">
    <div class="messages justify">
        <s:actionmessage />
    </div>
</s:if>

CSS:

.messages {
    background-color: #80FF80;
    border: 1px solid #000000;
    width: 600px;
    color: #000000;
    padding: 0;
    margin: 0;
}

.messages li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.justify {
    text-align: justify;
}

输出：

默认显示<s:actionmessage />，显示一个<li>，所以我修改了CSS去掉了它的默认样式

但是，即使设置为
，div的左侧仍然存在不均匀的填充 padding: 0; margin: 0;.

如何使两边相等？

编辑：（检查元素）

<div class="messages justify">
    <ul class="actionMessage">
        <li>
            <span>
                You have successfully changed your password. This is just to make the message long, so it will have to go to the second line of the div.
            </span>
        </li>
    </ul>
</div>

Answer 1

只需在您的 CSS .message li 中添加 !important 作为

 .message li{
  padding: 0px !important;
  margin: 0px !important;}

Answer 2

大多数 browsers 为 ul/ol

提供默认值 padding

试试这个

.messages .actionMessage{
  padding:0;
}

如果不行，请尝试使用 !important

.messages .actionMessage{
  padding:0 !important;
}

Answer 3

我刚刚添加了 padding-right 来平衡它：

.messages {
    background-color: #80FF80;
    border: 1px solid #000000;
    width: 600px;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
}

.messages li {
    list-style: none;
    padding-right: 40px;
}

看起来还不错。

Answer 4

这是由于浏览器对 <ul> 元素应用了默认的 padding-left。

有许多具有默认值的元素，它们在不同的浏览器之间可能会有所不同（而且它们确实如此），因此您应该在页面中首先加载，CSS 重置，这是一个特殊的用于清除任何特定于浏览器的默认设置并确保您将编写的 CSS 规则在每个浏览器中以相同方式呈现的样式表。

看看这个老了还是不错的List of CSS Reset.

顺便说一下，@VitorinoFernandes 的解决方案是正确的（而另一个则不是，因为它将填充应用到 <li>，而不是 <ul>），这是一个运行示例：

.messages {
    background-color: #80FF80;
    border: 1px solid #000000;
    width: 600px;
    color: #000000;
    padding: 0;
    margin: 0;
}

.messages li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.justify {
    text-align: justify;
}

.nopadding{
   padding-left: 0px;
}

<div class="messages justify">
    <ul class="actionMessage">
        <li>
            <span>
                You have successfully changed your password. This is just to make the message long, so it will have to go to the second line of the div.
            </span>
        </li>
    </ul>
</div>

<div class="messages justify">
    <ul class="actionMessage nopadding">
        <li>
            <span>
                You have successfully changed your password. This is just to make the message long, so it will have to go to the second line of the div.
            </span>
        </li>
    </ul>
</div>

那么您的 HTML 与显示的不同，或者您在 CSS 规则中有错字，或者您在上述规则之后加载了其他 CSS 规则覆盖设置（但这很奇怪，这是 99.9% 的默认填充，所以...我打赌打错了）。

无法从 div 中删除填充

Cannot remove padding from div

html

css

struts2