Question

我正在从事房地产网站项目。我已经创建了Photoshop模板并将其上传到Behance。 https://www.behance.net/csc103falld848

现在，我正在创建房地产商店模板的静态版本。我面临一个问题。我无法与“搜索字体超棒”徽标并排插入搜索字段。我已经尽力解决了。请看一下屏幕截图以了解问题： https://drive.google.com/open?id=1-wqJu9K6QtG1tzK_MiEuGAuveZ_-KKaK

#search-rectangle {
  width: 50px;
  height: 40px;
  background-color: #0054a6;
}

#search-here-rectangle {
  width: 110px;
  height: 40px;
  background-color: #00aeef;
}

#search-field {
  width: 110px;
  height: 40px;
  background-color: #00aeef;
}

<div id="rectangle">

  <div class="col-sm-4 search-rectangle" id="search-rectangle">
    <i id="search" class="fa fa-search"></i>
  </div>

  <div class="col-sm-8" id="search-here-rectangle">
    <input id="search-field" type="text" name="Search Here" value="Search Here" size="20">
  </div>

</div>

这是CodePen.io链接： https://codepen.io/kanan292/pen/rrpegK

期待从您那里得到一个好的解决方案。

Answer 1

您在这里。.用所需的图标更改“ GO”文本。

.input-group .btn {
  background-color: #0054a6;
  padding: 10px 12px;
  border: 0 none;
  color: #fff;
}

#search-field {
  width: 110px;
  background-color: #00aeef;
  color: #fff;
  height: 40px;
  border: 0 none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="
    margin-top: 20px;
">

  <div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" style="background-color: #0054a6;">Go!</button>
      </span>
    <input type="text" class="form-control" placeholder="Search for..." id="search-field" name="Search Here" value="Search Here">
  </div>

</div>

搜索字段问题：无法与搜索字体真棒徽标并排插入搜索字段

1 个答案: