Question

我正在尝试将可扩展搜索框添加到一行项目中。我使用示例here作为其核心。这是我的jsfiddle。我试图通过限制宽度来模拟问题。所有样式语句都只是用于格式化它。主要问题是我想给搜索div提供足够的空间来显示搜索图标。然后，当它被覆盖时，它应该扩展以允许输入。正如你所看到的，它扩展但方向错误。

原始代码有“浮动：正确！重要;”而不是“position：fixed！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

请尝试以下代码。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使可扩展的搜索适合空间

1 个答案: