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

您需要对上级UL使用text-align：权限

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

如果需要一些绝对定位，则可以对nav元素而不是li或inner元素使用定位。

看到这个小提琴 https://jsfiddle.net/qz1m5hub/

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

1 个答案: