为什么我的菜单中的文字向右移动？答案

【问题标题】：Why is the text in my menu shifted to the right?为什么我的菜单中的文字向右移动？
【发布时间】：2019-09-02 11:31:58
【问题描述】：

我目前正在为我的 Wordpress 网站设置侧边栏菜单。我遇到了2个问题。第一个是菜单中的文本没有正确排列在左侧。我曾尝试使用 text-align 属性，但它不起作用。

第二个问题是菜单底部有一点不知道为什么的随机空间。

这里发生了问题：http://dreamedbig.com/our-services/

我的 HTML/PHP：

<div class="page-content">
 <div id="services-menu" class="services-sidebar">
    <?php dynamic_sidebar('services'); ?>
</div>
</div>

CSS：

#services-menu {
    border: 1px solid black;
    align-items: left;
    float:left;
    height: auto;
    display: inline-block;
    top:0;
    left:0;
    background-color: #BCE6FB;
}

#services-menu li{
    list-style-type:none;
    border-bottom: 1px solid black;
}

#services-menu a {
    text-decoration: none;
    color: #08203D;
}

#services-menu ul {
}

#services-menu ul li a {
    position: relative;
    display: block;
    box-sizing: border-box;
    z-index: 1;
    margin: 5px;
    padding-left:   5px;
    padding-right: 5px;
}

#services-menu ul li a::after
{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    background-color: #00A2DA;
    width: 0%;
    height: 100%;
    transition: all 1s;
    z-index: -1;
}

#services-menu ul li a:hover::after
{
    width: 100%;
}

#services-menu ul li:nth-child(odd) a::after
{
    background-color: #00A2DA;
}

#services-menu ul li:nth-child(even) a::after
{
    background-color: #FFFFFF;
}

【问题讨论】：

请包含相关的渲染 HTML。在没有看到dynamic_sidebar('services'); 生成的内容的情况下，我们只是在猜测，或者不得不离开现场才能找到关键信息。问题应包含所有相关信息，最好是minimal reproducible example。如果您在我们尝试调试问题时积极尝试解决问题，那么指向您网站的链接可能会出现问题，从而为我们提供了一个移动目标。

标签： php html css wordpress

【解决方案1】：

看起来您从名为.widget 的类中继承了一些样式，并且在ul 中添加了边距和填充。这很常见，因为您使用 WordPress 之类的东西或某些样式表附带的下划线。

我认为这些样式会纠正它

.widget, #services-menu ul{
  margin:0;
  padding:0;
}

我通过在我的 chrome 浏览器中使用检查发现了不需要的边距和填充。我强烈推荐它用于前端样式，因为它可以更轻松地解决这类问题。

Here is an article to better explain how it works

【讨论】：

继承样式是底部空间的原因。不过对我来说，左侧填充是 chrome 完成的列表元素的默认小格式。为了避免这样的事情，我建议在 google 中搜索 reset.css，并将其包含在任何其他 css 之上（尽管有些人会说这是一个老式的解决方案）。但是，是的，学习使用浏览器中的“检查元素”功能是一个很好的建议，它对此类事情有极大的帮助。您还可以即时尝试修改。我再也回不去不使用它了。
^ 我没有意识到这是由 chrome 引起的。我一直遇到它，最后把它变成了我的规范化风格。感谢您的洞察力:)
好的，谢谢！这解决了这两个问题。我一定会看看这篇文章。