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

Question

我尝试了很多技术来解决这个问题。我使用了浮动（左/右）并使用定位（绝对和相对）。没有任何效果。

基本上，当应用文本装饰（字体粗细：粗体；在这种情况下）时，我的导航会继续移动。

我是 CSS 新手，这是我的第一个标题，因此欢迎对整个标题/站点导航提供任何反馈。我的第二层导航（ul 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;
}

这里是the website

谢谢，

Answer 1

这是正常行为：粗体文本更宽，因此重新定位围绕它的居中文本。

您可以在所有链接上使用固定宽度来防止这种情况：

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