搜索框展开时向左移动菜单项

Question

我有一个搜索框，点击它会向左扩展。但是当搜索框展开时，搜索框旁边的链接也应该向左移动。

这是我正在处理的代码

<nav class="header-menu">
  <ul>
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>

    <li class="search-wrap">
      <input class="search" type="search" placeholder="Search"></li>
  </ul>
</nav>

.header-menu ul li {
  display: inline-block;
  vertical-align: middle;
}

.search-wrap {
  width: 175px;
  position: relative;
  height: 27px;
  vertical-align: middle;
  display: inline-block;
}

.search {
  border: 1px solid #ccc;
  padding: 5px 7px;
  margin-left: 15px;
  width: 175px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  position: absolute;
  right: 0;
  top: 0;
}

.search:focus {
  width: 225px;
}

目前点击搜索框会向左展开，但菜单项不会向左移动。

我该如何解决。任何帮助或建议将不胜感激。

提前致谢

Answer 1

您需要使用 text-align : right for parent UL

.header-menu ul {
  text-align:right;
 }

.header-menu ul li {
  display: inline-block;
  vertical-align: middle;
}

.search-wrap {
  width: 175px;
  position: relative;
  height: 27px;
  vertical-align: middle;
  display: inline-block;
  border: 1px solid #ccc;
  margin-left: 15px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.search {
  border: none;
  padding: 5px 7px;
  width: 100%;
}

.search-wrap:focus-within {
  width: 225px;
}

如果您需要一些绝对定位，那么您可以对导航元素而不是 li 或内部元素使用定位。

看到这个fiddle https://jsfiddle.net/qz1m5hub/

搜索框展开时向左移动菜单项

Move menu items to left when search box expands

html

css

menuitem

uisearchbar