Html 文本装饰/CSS导致文本移动

我尝试了很多方法来解决这个问题。我使用了浮动（左/右）和定位（绝对和相对）。没有一个奏效

基本上，当应用文本装饰（字体重量：粗体；在本例中）时，我的导航一直在移动

我是CSS新手，这是我的第一个标题-所以欢迎对标题/站点导航的任何反馈。我的第二层nav（ul）似乎是垂直排列的，似乎使用了前一层的效果。这也需要修正

这是我的密码：

.main-navigation {
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    padding-top:0em;
    margin: 0px auto;
    z-index: 999;
    border-top: 2px solid;
    border-bottom: 1px solid;
    display: inline-block;
}

.main-navigation-body {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}

.main-navigation-body ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation-body a {
color:black;
}

.main-navigation-body a:visited {
}

.main-navigation li {
    display: inline-block;
    text-align: center;
    padding:1.64em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    }

.main-navigation a {
    text-decoration: none;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 2.0em;
    left: -999em;
    z-index: 99999;
    background-color:pink;
    width: 100px;
    text-align:left;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {

}

.main-navigation ul ul li {
display: inline-block;
    border-top: 0px solid;
    border-bottom: 0px solid;
    padding:0.1em;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
font-weight: bold;
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
font-weight: bold;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
font-weight: bold;
color: #BB9A69;
}

这是

---

谢谢，

这是正常的行为：粗体文本更宽，从而重新定位其周围的居中文本

您可以在所有链接上设置固定宽度，以防止出现这种情况：

.main-navigation a {
    text-decoration: none;
    min-width: 6em;
    display: inline-block;
}

---

看一看这里，谢谢-这似乎已经做到了。为什么是6em？我的页眉设计还有其他缺陷吗？这是我的第一次，我想学习如何正确和干净地使用它。em是相对于字体大小的一个单位，所以假设一定的字长是很有用的。我们使用

inline block

属性指定宽度，同时将元素保留在文本流中。因为你在问：我看到你的链接有点跳跃，因为

：hover

上有额外的边框。可以在常规状态下应用透明边框以防止像素跳跃。