html - 无论屏幕大小如何，都使用 CSS 修复 DIV 内的 SPAN 位置

Question

我有一个要求，我需要设计一个带有搜索图标的搜索框。我在下面编写了 HTML 代码和 CSS 类来实现这一点。它在 13" 屏幕上运行良好。但是当屏幕分辨率或大小发生变化时，搜索框和图标会中断。

<div class="col-sm-3 pull-right">
  <div class="search-box">

    <input type="text" class="portfolio-search-input" placeholder="Search by Benefit name" />

    <span class="">
      <i class="fa fa-search"></i>
    </span>

  </div>
</div>

.portfolio-search-input {
  width: 85%;
  height: 26px;
  margin-top: 5px;
  margin-left: 100px;
  padding: 0 15px;
  outline: none;
  &:focus {
    border: 1px solid;
  }
}

.search-box {    
  position: relative;
  clear: both;
  > span {
    color: rgb(209, 15, 15);
    display: inline-block;
    margin-left: 115%;
    position: absolute;
    bottom: 3px;
  }
}

.pull-right {
  float: right;
}

无论屏幕尺寸/分辨率如何，如何固定尺寸和位置。

在 13" 屏幕上，它的工作正常，如下图所示。

但在更大的屏幕上它会中断，如下所示。

如果我正在使用margin-left:300px;，它在 13" 屏幕上可以正常工作。在更大的屏幕上，它会给出下图。

标签： htmlcsscss-selectorslesscss3pie

Answer 1

margin-left从中删除.search-box > span。并添加right: 0.

margin-left从中删除.portfolio-search-input。添加添加到.search-box

这是片段

.portfolio-search-input {
  width: 85%;
  height: 26px;
  margin-top: 5px;
  /* margin-left: 100px; */
  padding: 0 15px;
  outline: none
}

.portfolio-search-input:focus {
  border: 1px solid;
}

.search-box {    
  position: relative;
  margin-left: 100px;
  clear: both;
}

.search-box > span {
  color: rgb(209, 15, 15);
  display: inline-block;
  /* margin-left: 115%; Remove this */
  right: 0; /* Add this */
  position: absolute;
  bottom: 3px;
}

.pull-right {
  float: right;
}

<div class="col-sm-3 pull-right">
  <div class="search-box">

    <input type="text" class="portfolio-search-input" placeholder="Search by Benefit name" />

    <span class="">
      <svg class="svg-icon" viewBox="0 0 20 20" height="16">
                            <path fill="red" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
                        </svg>
    </span>

  </div>
</div>