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

Question

我目前正在为我的 Wordpress 网站设置侧边栏菜单。 我遇到了两个问题。 第一个是菜单中的文本没有正确对齐左侧。 我曾尝试使用 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;
}

Answer 1

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

我认为这些样式会纠正它

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

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

这里有一篇文章可以更好地解释它是如何工作的