html - 使可扩展搜索适合空间

Question

我正在尝试向一行元素添加一个可扩展的搜索框。我正在使用示例 here作为这个的核心。这是我的 jsfiddle .我试图通过限制宽度来模拟问题。所有的样式语句都只是为了在这里格式化它。主要问题是我想为搜索 div 提供足够的空间来显示搜索图标。然后，当鼠标悬停在上面时，它应该展开以允许输入。如您所见，它在错误的方向上扩展。

原始代码有“float: right !important;”而不是“位置:固定!重要；z-index:100；”我改成了。我这样做是因为我可以控制位置。它奏效了。但结果不是我想要的。

简而言之，源站点提供的代码可以正常工作，但前提是搜索图标单独在一行上。是否可以将它与其他元素放在一条线上并仍然根据需要展开？

这是我使用的代码:

    <style>
     .search-form .form-group {
      position:fixed !important;
      z-insex:100;
      transition: all 0.35s, border-radius 0s;
      width: 32px;
      height: 32px;
      background-color: #fff;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
      border-radius: 25px;
      border: 1px solid #ccc;
    }
    .search-form .form-group input.form-control {
      padding-right: 20px;
      border: 0 none;
      background: transparent;
      box-shadow: none;
      display:block;
    }
    .search-form .form-group input.form-control::-webkit-input-placeholder {
      display: none;
    }
    .search-form .form-group input.form-control:-moz-placeholder {
      /* Firefox 18- */
      display: none;
    }
    .search-form .form-group input.form-control::-moz-placeholder {
      /* Firefox 19+ */
      display: none;
    }
    .search-form .form-group input.form-control:-ms-input-placeholder {
      display: none;
    }
    .search-form .form-group:hover,
    .search-form .form-group.hover {
      width: 100%;
      border-radius: 4px 25px 25px 4px;
    }
    .search-form .form-group span.form-control-feedback {
      position: absolute;
      top: -1px;
      right: -2px;
      z-index: 2;
      display: block;
      width: 34px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      color: #3596e0;
      left: initial;
      font-size: 14px;
    }
    </style> 


    <div style="width:250px;border:1px solid">
      <div style="display:inline-block;width:100px;border:1px solid;"><img src="example.com/test.png" width="100"></div>
      <div style="display:inline-block;width:80px;border:1px solid;vertical-align:top;">A block of text</div>
      <div class="search" style="display:inline-block;vertical-align:top;">
        <div class="searchbox-margin">
          <form action="" class="search-form">
            <div class="form-group has-feedback">
              <label for="search" class="sr-only">Search</label>
              <input type="text" class="form-control" name="keywords" id="search" placeholder="Search">
              <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div> 
          </form>  
        </div>
      </div>
    </div>

Answer 1

试试下面的代码。

.search-form .form-group input.form-control::-webkit-input-placeholder {
      display: none;
    }
    .search-form .form-group input.form-control:-moz-placeholder {
      /* Firefox 18- */
      display: none;
    }
    .search-form .form-group input.form-control::-moz-placeholder {
      /* Firefox 19+ */
      display: none;
    }
    .search-form .form-group input.form-control:-ms-input-placeholder {
      display: none;
    }
    .search-form .form-group:hover,
    .search-form .form-group.hover {
      width: 50%;
      border-radius: 4px 25px 25px 4px;
      /*transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
    }
    .search-form .form-group span.form-control-feedback {
    position: absolute;
    top: -1px;
    right: -2px;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #3596e0;
    left: initial;
    font-size: 14px;
}

    .search-form .form-group input.form-control {
    border: 0 none;
    box-shadow: none;
    display: block;
    height: 27px;
    margin-top: 2px;
    width: 87%;
    padding-right: 20px;
    background: transparent;
}

.search-form .form-group {
    position: fixed !important;
    z-index: 100;
    transition: all 0.35s, border-radius 0s;
    width: 48px;
    height: 32px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    border-radius: 25px;
    border: 1px solid #ccc;
    margin-top:2px;
}

<div style="width:250px;border:1px solid">
      <div style="display:inline-block;width:100px;border:1px solid;"><img src="example.com/test.png" width="100"></div>
      <div style="display:inline-block;width:80px;border:1px solid;vertical-align:top;">A block of text</div>
      <div class="search" style="display:inline-block;vertical-align:top;">
        <div class="searchbox-margin">
          <form action="" class="search-form">
            <div class="form-group has-feedback">
              <input type="text" class="form-control" name="keywords" id="search" placeholder="Search">
              <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div> 
          </form>  
        </div>
      </div>
    </div>