如何创建一个带有徽标的分隔菜单

Question

编辑：在这里摆弄：https://jsfiddle.net/tp27e67L/

我正在尝试从模型设计创建一个菜单，我最初在徽标的每一侧都绘制了3个菜单项，但我在用css执行这个想法时遇到了麻烦。

这个菜单是通过wordpress创建的，所以我不能在不使用自定义脚本的情况下自定义html（我必须这样做才能让徽标显示在哪里）。菜单必须是单个菜单，所以我不能将其分成2个菜单，只需将徽标放在两个菜单之间等。

我尝试使用display table，table-row和table-cell，但它与我正在努力实现的目标并不相近。

这应该是这样的：

这是我的（有点不完整）尝试的样子：

这是我的尝试：

<div id="desktop-nav">
  <ul id="desktop-nav-menu" class="clearfix no-bullet">
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">Hem</li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">Aktiviteter</li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">Konferenser</li>
    <li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28">Priser</li>
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">Om oss</li>
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">Kontakta oss</li>
  </ul>          
</div>

#desktop-nav {
  display: table;
  width: 100%;
}

#desktop-nav-menu {
  display: table-row;
}
#desktop-nav-menu .menu-item {
  display: table-cell;
  text-align: center;
}

.site-logo {
  min-width: 400px;
}
.site-logo > img {
  width: 400px;
  height: 146px;
  margin: -6px auto 0;
}

徽标是且且必须最多400px宽，但可以在调整大小时缩放。

我正在努力让徽标出现在中间，同时让.menu-item占用尽可能多的空间，同时让它看起来像所需的方式。如果可能，我希望避免为.menu-item设置固定宽度，因为文本可能会变长或变短。

感觉就像我正在尝试这样做的方式完全有点笨拙所以我会感激一些帮助。

Answer 1

这是你要找的吗？

<div id="desktop-nav">
  <ul id="desktop-nav-menu" class="clearfix no-bullet">
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">Hem</li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">Aktiviteter</li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">Konferenser</li>
    <li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28">Priser</li>
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">Om oss</li>
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">Kontakta oss</li>
  </ul>          
</div>
<style>
#desktop-nav {
  display: table;
	position: absolute;
	top: 0;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, 0);
	text-align:center;
}

#desktop-nav-menu {
  display: table-row;
}
#desktop-nav-menu .menu-item {
  display: table-cell;
  text-align: center;
}

.site-logo {min-width:400px;
}
.site-logo > img {
  width: 400px;
  height: 146px;
  margin: -6px auto 0;
}
</style>

我从width:100%;删除了#desktop-nav，并将其替换为：

position: absolute;
top: 0;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0);
text-align:center;

Answer 2

首先，您要垂直对齐菜单项。你几乎得到它，因为你已经将它们显示为表格单元格。但是你漂浮它们。删除它并添加 public void sethelloPrx(){ Ice.Communicator ic=null; try{ ic=Ice.Util.initialize(); Ice.ObjectPrx base= ic.stringToProxy("hello:tcp -h 127.0.0.1 -p 10000"); index = helloPrxHelper.checkedCast(base); if(index == null) throw new Error("Invalid proxy"); }catch(Exception e){ Toast.makeText(MainActivity.this, "IceMain 注册失败", Toast.LENGTH_SHORT).show(); Log.e("bmi",e.toString()); } }

vertical-align: middle

您还会看到菜单的宽度与屏幕一样宽。您可能希望将其缩小，将宽度添加到#desktop-nav-menu .menu-item { display: table-cell; /*float: left;*/ vertical-align: middle; text-align: center; } 并添加#desktop-nav以将其置于页面的中心位置：

margin: 0 auto

Updated Fiddle

Answer 3

请勿使用display table, table-row and table-cell

请改用float。它使设计更加灵活。 DEMO

添加了边框供您参考。

看看这是否适合你。

#desktop-nav {
  display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    text-align:center;
  border:1px solid red;
  overflow:hidden;
}

#desktop-nav-menu {
  display: inline-block;
  border:1px solid green;
  padding:0px;
}
#desktop-nav-menu .menu-item {
  float:left;
  width:auto;
  text-align: center;
  list-style:none;
  height: 146px;
   line-height: 146px;
  border:1px solid blue;
}

.site-logo {min-width:400px;
  height: 146px;
  border:1px solid red !important;
}
.site-logo > img {
  width: 400px;

  border:1px solid red ;
}

Answer 4

据我了解你的问题，徽标不是实际的菜单元素，而是造型的一部分。基于此假设，您应该删除行

<li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>

完全

通常更好地保留html代码的语义完整性。

而是将徽标设置为菜单上的背景图像。然后，您可以使用css选择器来分隔菜单元素。

#desktop-nav-menu {
    background: url(logo.png) no-repeat 100px 0
}

#desktop-nav-menu .menu-item {
    position: relative;
    left: 100px;
}

#desktop-nav-menu .menu-item:nth-child(1),
#desktop-nav-menu .menu-item:nth-child(2),
#desktop-nav-menu .menu-item:nth-child(3) {
    left: 0px;
}

缺点是这只能在一行上使用。