css 导航栏无法居中

sg3maiej 于 2023-03-24 发布在其他

关注(0)|答案(4)|浏览(141)

我试图创建一个居中的导航栏与10px边框顶部，左，右.但当我改变宽度它的粘在左边的页面.如果我把一个保证金他们不看均匀间距.非常新的这.
这是我目前的CSS

nav {
  display: inline-block;
  background-color: #381D2A;
  justify-content: center;
  position: fixed;
  width: 99%;
  z-index: 1;
  border-radius: 20px;
  margin: auto;
  padding: 0;
  margin: 10px 10px 0 10px;
}

nav ul {
  display: flex;
  align-items: center;
  padding: 0;
  list-style: none;
  justify-content: center;
}

how i want it to look, but no matter the width of the browser window, as it only looks like this if it's stretched a certain amount

css

来源：https://stackoverflow.com/questions/75832236/navigation-bar-wont-center

4条答案

按热度按时间

0sgqnhkj1#

我认为你需要在body元素中添加box-sizing: border-box：

body, * {
  box-sizing: border-box;
}

box-sizing属性在您添加margin/padding时调整宽度/高度。更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

赞(0）回复(0）举报 2023-03-24

pgky5nke2#

使nav元素的宽度取100%，使其均匀分布，然后根据您的需要添加/增加/减少margin。

nav {
  display: inline-block;
  background-color: #381D2A;
  justify-content: center;
  position: fixed;
  width: 100%;
  z-index: 1;
  border-radius: 20px;
  margin: auto;
  padding: 0;
  margin: 10px 20px 0 20px;
}

另外，确保将box-sizing设置为border-box，以告诉浏览器考虑为元素的宽度和高度指定的值中的任何边框和填充（docs）

* {
  box-sizing: border-box
}

赞(0）回复(0）举报 2023-03-24

balp4ylt3#

如果需要使用“位置：fixed;”，则需要使用“left/right”将其定位，以便使其居中而不是向左/向右边缘。

赞(0）回复(0）举报 2023-03-24

b4qexyjb4#

nav {
  display: inline-block;
  background-color: #381D2A;
  justify-content: center;
  position: fixed;
  width: 99%;
  z-index: 1;
  border-radius: 20px;
  margin: 10px auto;
  padding: 0;
  left:0;
  right:0;
}

赞(0）回复(0）举报 2023-03-24

我来回答

css 导航栏无法居中

4条答案

相关问题

热门标签

最新问答