javascript 如何修复Logo和导航菜单之间的空白？

eoxn13cs 于 2024-01-05 发布在 Java

关注(0)|答案(5)|浏览(147)

这是我的标题部分的现场演示，我可以做些什么来修复徽标和导航菜单之间的空白？
我希望image和.nav彼此靠近，而不是一个靠向另一个，这样两个外部的空间是相同的。

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 100px;
}
ul {
  display: flex;
  list-style: none;
}
ul li {
  padding: 8px 12px;
}
.nav .logo {
  width: 120px;
}

个字符

JavaScript

来源：https://stackoverflow.com/questions/77713424/how-to-fix-the-empty-space-between-logo-and-navigation-menu

5条答案

按热度按时间

zwghvu4y1#

从nav中删除justify-content：

.nav {
   display: flex;
   align-items: center;
   /* justify-content: space-between; */
   margin: 10px 100px;
}

字符串

赞(0）回复(0）举报 2024-01-05

hwamh0ep2#

我试着改变了一些CSS代码，看起来很酷！
https://codepen.io/Ravi_chitroda/pen/LYapMPY

.nav {
  display         : flex;
  align-items     : center;
  justify-content : space-arround;
  margin          : 10px 20px;
  }
ul {
  display    : flex;
  list-style : none;
  margin : 0;
  padding : 0;
  }
ul li {
  padding : 8px 8px;
  }
.nav .logo {
  width   : 120px;
}

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-05

z9zf31ra3#

正如@abasahed指出的那样，

.nav {
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  margin: 10px 100px;
}
ul {
  display: flex;
  list-style: none;
}
ul li {
  padding: 8px 12px;
}
.nav .logo {
  width: 120px;
}

个字符
这里是codepen链接
https://codepen.io/zsaleem/pen/QWowGVg

展开查看全部

赞(0）回复(0）举报 2024-01-05

dzjeubhm4#

要获得所需的结果，“nav”类CSS规则中margin属性的值应按如下所示进行更改：

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 10px;
}

字符串
谢谢.

赞(0）回复(0）举报 2024-01-05

rjzwgtxy5#

使用justify-content : space-around;代替justify-content : space-between;

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 如何修复Logo和导航菜单之间的空白？

5条答案

相关问题

热门标签

最新问答