Html 我似乎不能正确地将我的导航栏居中'

发布于03月27日

我目前正在为我的个人网站创建一个导航栏，在使它看起来体面的移动过程中，我似乎不能正确地居中导航栏.不管我做什么，它都向右边倾斜.

这是我的导航栏代码.我试过margin和padding属性，但它们在@ media属性中根本没有任何影响.我以前也做过navbar与flexbox，我遇到了同样的问题，它倾斜到右边.我已经改变了显示屏，以弯曲内部@ media属性，它也倾斜到右边，无论是边缘还是填充都不会影响它.

.navbar {
  padding: 1px 2px;
  border: 4px double;
  justify-content: center;
  margin-left: 43%;
  margin-right: 43%;
  border-radius: 8px;
  background-color: rgba(19, 19, 22, 0.7);
  border-color: white;
}

.navbar ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin: 3px 13px;
}

@media (max-width: 500px) {
  .navbar {
    width: fit-content;
  }
  .navbar ul {
    text-align: center;
  }
}

<nav class="navbar">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contacts.html">Contacts</a></li>
  </ul>
</nav>

在我的@media中，我有width:fit-content属性，但如果我删除它，它不再倾向于右边，但文本重叠边框.

.navbar { padding: 1px 2px; border: 4px double; border-radius: 8px; background-color: rgba(19, 19, 22, 0.7); border-color: white; } .navbar ul { list-style: none; text-align: center; margin: 0; padding: 0; } .navbar li { display: inline-block; margin: 3px 13px; } .d-flex { display: flex; } .justify-content-center { justify-content: center; }

<div class="d-flex justify-content-center"> <nav class="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contacts.html">Contacts</a></li> </ul> </nav> </div>

Html 我似乎不能正确地将我的导航栏居中'

推荐答案

Html相关问答推荐

传单自定义标记(divIcon)html/css不适用

Xpath：提取标签之间的文本，但一旦出现嵌入标签就停止

我需要主页按钮出现在中间

如何使用bslb设置可导航页面侧边栏的样式

在浮动元素旁边垂直居中

<；img>；和具有负边距的元素的堆叠顺序

通过POST方法提交html表单时CSV文件无法通过(在使用Django的上下文中)

默认情况下使用Disbale Scroll，但在单击图标后将其激活

Chrome浏览器错误：上的主题验证判断https：//pagead2.googlesyndication.com/失败

如何 Select 表格'；TMS Web Core中的body html元素？

为什么 CSS 网格超出了父级？

CSS Grid 布局：1 大图和 3 小图

如何使用CSS将页面标题水平居中对齐

防止HTML输入中出现负数但接受小数

子 div 在父 div 中溢出

右对齐 bootstrap 导航项而不是下拉菜单

辅助功能：alt 或 alt="" 用于装饰图像

如何向上移动图像并溢出图像的一部分而另一部分不溢出

如何使用：hover zoom 重叠图像？

所有幻灯片上的 Quarto RevealJS 标题