Question

我有一个菜单，我希望始终位于屏幕的顶部中心。我希望菜单看起来总是一样，并且在一行上独立于屏幕宽度（我会让它在一定的宽度上消失）。目前，菜单由于某种原因变成了一定宽度的双线菜单。

如何删除此双线菜单问题？

调整jsfiddle中的屏幕大小，你就会理解我的意思。

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>

CSS ：

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;
}

Answer 1

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

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

以下是您更新的示例：https://jsfiddle.net/25brdx7r/

Answer 2

您可以使用text-align: center;

，而不是使用保证金百分比来对文字进行居中

从margin-left移除margin-right和ul。
将width: 100%;，text-align: center;和white-space: nowrap;添加到您的ul。
从float: left;样式中删除li。

html, body {
    width: 100%; height: 100%;
    margin: 0;
    padding: 0;
}

/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	width: 100%;
        text-align: center;
        white-space: nowrap;
}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	margin-right: 1px;
}

/*Style for menu links*/
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;
}

/*Hover state for top level links*/
li:hover a {
	text-decoration:none;
  color: rgba(153, 153, 153, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

<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>

<强> JSFiddle

Answer 3

我重新构建了你的HTML / CSS。密切注意下面的4和5，但总的来说，我......

将CSS挂钩更改为主要是类（对选择器中的标记的依赖性较小）
在标记中添加了HTML5标记<nav>以获得更好的语义
删除了其中一个菜单项的<a>标记，以显示我将该类移至<li>并将某些CSS属性移至不同规则的原因
添加了white-space: nowrap;以在一行中保留内联块元素
在屏幕太小时，以480px（通过媒体查询）添加断点以重新格式化菜单

.menu-list {
  display: block;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  white-space: nowrap;
}

.menu-list-item {
  display: block;
  min-width: 90px;
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 50px;
  color: #000;
}

.menu-list-item a {
  display: block;
  cursor: pointer;
}

.menu-list-item:hover a {
  text-decoration: none;
  color: rgba(153, 153, 153, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

@media(min-width: 480px) {
  .menu-list-item { display: inline-block; }
  .menu-list-item a { min-width: 90px; }
}

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

JSFiddle version

Answer 4

将显示更改为内联。阻止在另一条线上显示。

如何在一行菜单上总是在中心？

4 个答案: