Css 如何在一行菜单上始终居中？

我有一个菜单，我想总是在屏幕的顶部中心。我希望菜单总是看起来一样，并且在一行上独立于屏幕宽度（我将使它在某个宽度消失）。此时，由于某种原因，菜单变成了具有一定宽度的两行菜单

如何消除此两行菜单问题

在JSFIDLE中调整屏幕大小，您就会明白我的意思

HTML：

<ul id="menu">
  <li><a href="#" class="menu-items1">OM OSS</a></li>
  <li><a href="#" class="menu-items1">TJÄNSTER</a></li>
  <li><a href="#" class="menu-items1">KUNDER</a></li>
  <li><a href="#" class="menu-items1">ADDRESS</a></li>
</ul>

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    margin-left:29%;
    margin-right:29vw;
}

li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

li a {
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    letter-spacing:2px;
    display:block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #000;
}

.menu-items1 {
    min-width:90px;
    margin-top:1.5px;
}

.menu-items2-1 {
    margin-left:20px;
}

.menu-items2-2 {
    margin-left:20px;
    margin-top:0.5px;
}

.menu-items2-3 {
    margin-left:10px;
}

.menu-items2-4 {
    margin-left:30px;
    margin-top:0.5px;
}

li:hover a {
    text-decoration:none;
  color: rgba(153, 153, 153, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}

li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

---

将显示更改为内联显示。块显示在另一行。

为了始终将它们保持在一行中，您可以使用表格显示：

#menu {
    display: table;
}
.menu-items {
    display: table-cell;
}

---

下面是您更新的示例：

您可以使用

文本对齐：居中，而不是使用边距百分比来居中文本

从
ul
上拆下
左边距
和
右边距
添加
宽度：100%，
文本对齐：居中和
空白：nowrap到您的
ul

移除
浮动：左侧来自您的
li
样式


html，正文{
宽度：100%；高度：100%；
保证金：0；
填充：0；
}
/*去除ul的填充并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
位置：绝对位置；
宽度：100%；
文本对齐：居中；
空白：nowrap；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
字体系列：“开放式Sans”，无衬线；
字体大小：11px；
字母间距：2px；
显示：块；
高度：50px；
文本对齐：居中；
线高：50px；
颜色：#000；
}
.菜单项1{
最小宽度：90px；
利润上限：1.5px；
}
.菜单项2-1{
左边距：20px；
}
.菜单项2-2{
左边距：20px；
边际上限：0.5px；
}
.菜单项2-3{
左边距：10px；
}
.菜单项2-4{
左边距：30px；
边际上限：0.5px；
}
/*顶级链接的悬停状态*/
李：停一停{
文字装饰：无；
颜色：rgba（153、153、153、1）；
-webkit转换持续时间：0.4s；
过渡时间：0.4s；
光标：指针；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}





我已经对您的HTML/CSS进行了一些结构调整。请密切注意下面的4和5，但总而言之，我

将CSS挂钩更改为主要为类（减少对选择器中标记的依赖）
为获得更好的语义，在标记中添加了HTML5标记

删除了



地址

当屏幕宽度太小，无法在一行上显示时，您希望发生什么情况？根据您的答案找到了解决方案，thanx:）