如何在 CSS 中创建水平居中的菜单，同时菜单项之间的距离不同

Question

我在创建菜单项之间的距离不同的水平居中菜单时遇到问题。 每次都在炸。 我正在缩放我的显示器（出于某种原因，我无法在此处附上图片，但我希望你能理解）。 所以，不稳定。 有什么想法让它适应不同的页面缩放吗？

我只需要一个稳定的水平菜单。 每个菜单项的宽度为115px ，但彼此之间的距离不同。 以下是每个元素之间的距离：

• 第一个和第二个元素之间87px
• 第二个和第三个元素之间的56px
• 第 3 和第 4 个元素之间的29px

在此先感谢您，希望有人能提供帮助。

 .nav-menu { background-color: #ffffff; }.site-nav { font-size: 14px; width: 624px; margin: 0 auto; text-align: center; }.site-nav a { color: #626262; text-transform: uppercase; text-decoration: none; list-style: none; }.site-nav li:nth-child(1) { display: inline-block; margin-right: 124px; margin-bottom: 18px; margin-top: 76px; }.site-nav li:nth-child(2) { display: inline-block; margin-right: 108px; margin-bottom: 18px; margin-top: 76px; }.site-nav li:nth-child(3) { display: inline-block; margin-right: 106px; margin-bottom: 18px; margin-top: 76px; }.site-nav li:last-child { display: inline-block; margin-bottom: 18px; margin-top: 76px; }

 <header class="nav-menu"> <ul class="site-nav"> <li class="menu-item"><a href="#">Lifestyle</a></li> <li class="menu-item"><a href="#">Photography</a></li> <li class="menu-item"><a href="#">Music</a></li> <li class="menu-item"><a href="#">Travel</a></li> </ul> </header>

Answer 1

尝试以百分比而不是像素为单位给出margin-right值。 例如： margin-right: 5%; 您必须弄清楚哪个百分比与像素值相似，但它比不工作的导航栏要好。 如果我的问题正确，这应该就是您的意思。