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;
}

输出：

enter image description here

默认情况下，它显示为<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

大部分browsers为padding / ul提供默认ol

试试这个

.messages .actionMessage{
  padding:0;
}

如果没有尝试！important

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

Answer 2

我刚刚将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;
}

看起来不是很糟糕。

enter image description here

Answer 3

这是由于浏览器将padding-left应用于<ul>元素。

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

看看这个古老但仍然很好的List of CSS Reset。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

然后你有一个与显示的HTML不同的HTML，或者你在CSS规则中有一个拼写错误，或者在上面的那个之后加载了其他CSS规则来覆盖设置（但这很奇怪，这是99.9％默认填充，所以...我打赌错误）。

Answer 4

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

即可

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

无法从div中删除填充

4 个答案: