Question

我希望我就在这里，我需要你对即将上线的网店的帮助。我想将主要类别菜单置于顶部，但我错过了正确的CSS顺序。

This is what it looks right right now我有两种方法可以测试外观。

首先我想要的是一个居中的菜单，其中＆＃34; home＆＃34; 和＆＃34; Kollektionen＆＃34; 与左边的距离相同或者对。其次，我想尝试一下当每一个元素推动＆＃39;右边的下一个元素，使它以最后一个为中心。

你知道我的意思吗？ 2种不同的方式使我的菜单居中，我找不到正确的命令......

我希望你能帮助我。

提前致谢。

PS：对不起我的英语不好，这不是我的母语。

编辑：我无法发布代码我担心因为它不是我的代码。但也许这就足够了：基本模板由http://www.shopwaredemo.de/

组成

第二次编辑： 在尝试了Asko，Mike和Tom的回答后，我都问自己为什么？ display：flex和display：inline-box之间有什么区别，text-align和justify-content之间设置为center ???

Answer 1

也许使用display: inline-block？例如：

.menu {
  text-align: center;
}

.menu li {
  float: none; /* assuming the template has set this to 'left' */
  display: inline-block;
  margin-left: 20px; /* tweak this for the space inbetween items */
  margin-right: 20px; /* and this, too */
}

请注意，我没有查看代码，因此div .menu就是一个例子。

Answer 2

您可以尝试制作<ul> display: inline-block并将text-align: center应用于父级。

JSFiddle演示：http://jsfiddle.net/Q2hSv/1/

Answer 3

如果没有看到某些代码，也许这会有所帮助。

.topmenu {
    width: 80%;
    margin: auto;
}
.menuitems {
    float: left;
    width: // Here you take the number of items divided by 100%
         // remember to take borders and margins into account

Answer 4

根据您的浏览器范围，您可以使用display：flex;

HTML：

<nav>
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Neuheiten</a></li>
     <li><a href="#">Orschmuck</a></li>
     <li><a href="#">Ringe</a></li>
     <li><a href="#">Halsketten</a></li>
     <li><a href="#">Armbander</a></li>
     <li><a href="#">Kollecktion</a></li>
  </ul>
</nav>

CSS：

nav {
  background: #000;
  margin: 0 auto;
  width: 70%;
}

ul {
  display: flex;
  justify-content: center;
}

li {
  list-style: none;
}

示例http://codepen.io/tom-maton/pen/AFpnJ

Answer 5

重返工作岗位并设法实现我的目标：

再次感谢您的回答，我使用并使用了您的片段进行了大量播放，最后我使用了(click click!)：

#mainNavigation {
  margin: 0 auto;
  width: 98%;
}

#mainNavigation ul {
  display: flex;
  justify-content: center;
}

#mainNavigation li {
  list-style: none;
  width: 15%;
  text-align: center; /* to center the li-elements itself */
}

完美无缺！还在弄清楚什么是激动人心的证明 - 中心和显示：flex 但是我希望你知道你帮了很多忙。

<强> CHEERS！

PS：我的帖子怎么得到负面评价？它对我说-1！我做错了什么吗？

如何在我的网上商店中心菜单？

5 个答案: