Question

我有一个导航菜单，最后一项包含搜索输入字段。我希望输入字段能够响应，这样我就可以调整窗口大小并避免任何代价的菜单换行。我不想使用媒体查询，因为菜单最终将采用wordpress主题，因此项目将是动态的（不同数量的项目和不同长度的单词）。当然，在某个阶段，如果项目太多，菜单会中断，但我仍然希望找到一个解决方案，使输入搜索字段具有最小/最大宽度。

我不确定这是否可行。如果没有，有没有替代解决方案？

http://jsfiddle.net/aobrien/271vx59d/

<div class="menu">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
        <li>Link 6</li>
        <li>Link 7</li>
        <li>Link 8</li>
        <li>Link 9</li>
        <li>Link 10</li>
        <li>
            <form method="get" class="search-form2" action="/" >
                <input type="search"placeholder="Search" />
            </form>
        </li>
    </ul>
</div>

的CSS：

.menu {
    color:#FFF;
    width:100%;
    background:#000;
}

.menu > ul {
    display: inline-block;
    width:100%;
    padding:5px 0;
    margin:0;
}
.menu > ul > li {
    list-style:inside none;
    float:left;
    border-right:1px solid #FFF;
    padding: 0 5px;
}

.menu > ul > li:last-child{
    float:right;
    overflow:hidden;
    border-right:none;
}
input {
    width: 100%;
    max-width: 400px;
}

Answer 1

我希望输入字段具有响应性，以便我可以调整窗口大小并避免菜单行中断 不惜任何代价 。

您可以移除float，并使用display: table-cell元素white-space: nowrap和<li>，如下所示：

http://jsfiddle.net/271vx59d/7/

.menu {
  color: #FFF;
  width: 100%;
  background: #000;
}
.menu > ul {
  display: table;
  width: 100%;
  padding: 5px 0;
  margin: 0;
}
.menu > ul > li {
  list-style: inside none;
  border-right: 1px solid #FFF;
  padding: 0 5px;
  display: table-cell;
  white-space: nowrap;
}
.menu > ul > li:last-child {
  overflow: hidden;
  border-right: none;
  text-align: right;
}
input {
  width: 100%;
  max-width: 400px;
}

<div class="menu">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
    <li>Link 7</li>
    <li>Link 8</li>
    <li>Link 9</li>
    <li>Link 10</li>
    <li>
      <form method="get" class="search-form2" action="/">
        <input type="search" placeholder="Search" />
      </form>
    </li>
  </ul>
</div>

使菜单（li）内的输入字段响应

1 个答案: