Question

我通过在（外部）菜单之前添加文本徽标和将搜索输入字段添加为新菜单项来自定义Wordpress安装中的顶级菜单。我正在尝试1）将所有这些显示为一行，2）仅将搜索字段浮动到站点内容全宽的右侧。我可以用display: inline-block;做第一个，但不能用第二个做。要将搜索字段向右浮动，我不能使用display: inline-block;，但在这种情况下，我将把我的元素显示为两行。我该如何解决这个问题？

我的HTML代码：

<div class="wrap">
  <div class="site-logo">InfoPsi.md</div>
  <nav class="main-navigation" role="navigation">
    <div class="menu-meniul-de-sus-container">
      <ul id="top-menu" class="menu">
        <li class="menu-item">Despre</li>
        <li class="menu-item">Blog</li>
        <li class="menu-item">Contact</li>
        <li class="menu-item menu-item-search">
          <input type="search" class="search-field" value="" name="s">
        </li>
      </ul>
    </div>
  </nav>
</div>

我的CSS代码：

.site-logo,
.main-navigation {
  display: inline-block;
}

.main-navigation li {
  display: inline-block;
}

.site-logo,
.main-navigation li {
  padding: 1em 1.25em;
}

.menu-item-search {
  float: right;
}

JSFiddle演示：https://jsfiddle.net/iuriemalai/932enqzj/1/

我的实时网站：http://infopsi.md/

Answer 1

这里的问题是.main-navigation没有伸展。这可以使用flexbox轻松修复。只需将.wrap div设置为display: flex，将.main-navigation设置为flex: 1（以使其延伸）。您还需要将.site-logo设置为margin: auto，否则文本不会放在中间。 Here是一个更新的小提琴。

在自定义水平菜单中向右侧浮动输入字段

1 个答案: