搜索字段问题:无法正确插入搜索字段与搜索字体真棒徽标 [英] Search Field Issue: Can't Insert Search Field Side by Side with the Search Font Awesome Logo Properly

问题描述

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

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

#search-rectangle {宽度:50px；高度:40px；背景色:#0054a6；}#search-here-rectangle {宽度:110px；高度:40px；背景色:#00aeef；}#搜索字段{宽度:110px；高度:40px；背景色:#00aeef；}

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

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

期待您提供出色的解决方案.

解决方案

给你.. 用你想要的图标更改GO"文本.

.input-group .btn {背景色:#0054a6；填充:10px 12px；边界:0 无；颜色:#fff;}#搜索字段{宽度:110px；背景色:#00aeef；颜色:#fff;高度:40px；边界:0 无；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><div class="container" style="边距顶部: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">

I am working on a real estate website project. I have already created Photoshop template and uploaded it on Behance. https://www.behance.net/csc103falld848

Right now, I am creating the static version of the real estate store template. I am facing an issue. I can't insert search field side by side with the Search font awesome logo. I have tried my best to fix it. Please, take a look at the screen shot to understand the issue: 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>

Here is the CodePen.io link: https://codepen.io/kanan292/pen/rrpegK

Looking forward to getting a great solution from you.

解决方案

Here you go.. Change "GO" text with the icon you want.

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

这篇关于搜索字段问题:无法正确插入搜索字段与搜索字体真棒徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！