Question

我是一名自学成才的网站开发人员（仍在学习很多），我的主菜单/导航栏的样式遇到了一些困难。问题是我的菜单用完了指定/固定/自动位置。我正在使用Wordpress.org，它是无题主题。它是这样做的：http://www.betweenparentheses.net

这是我的代码：

.main-navigation {
float: right;
font-family: 'arvo', georgia;
font-size: 24px;
padding-top: 0px !important;
text-transform: uppercase;
clear:right;
margin-top: 0px;
}

.main-navigation ul {
list-style: none;
margin: -44px;
padding-left: -5px;
float: right;
}
.main-navigation li {
display: inline-block;
position: right;
margin-left: 4px;
padding-left: 16px !important;
}

Answer 1

您错误地指定了.main-navigation ul的保证金。您只给保证金一个值，这意味着所有四个方都有这个负边际。这就是您的菜单在视口外运行的原因。

您应该像这样指定：

.main-navigation ul {
list-style: none;
margin: -44px 0 0 0;
padding-left: -5px;
float: right;
}

我稍后会解释一下：

margin属性中的四个段表示元素的顺时针方向：右上角左下方。

您只需调整上边距即可更改元素在屏幕上的位置。

我还建议添加一个小的正右边距（例如22px），以便菜单右侧也有一些间距：

margin: -44px 22px 0 0;

<强>更新

为了让您的菜单到达所需的位置，请将.main-navigation的CSS替换为：

.main-navigation {
  float: none; /*Changed this*/
  font-family: 'arvo', georgia;
  font-size: 24px;
  padding-top: 0px !important;
  text-transform: uppercase;
  clear: right;
  margin-top: 0px;
  max-width: 1000px; /*Added this*/
  margin: 0 auto; /*and this*/
}

同时从.main-navigation ul规则中移除左右边距：

替换此

margin: -44px 18px 0 0;

用这个

margin: -44px 0 0 0;

主导航栏的位置在汽车区域外运行

1 个答案: