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

Posted 2023-03-06

【中文标题】无论屏幕大小如何，都使用 CSS 修复 DIV 内的 SPAN 位置

【英文标题】：Fix a SPAN position inside a DIV using CSS irrespective of screen size

【发布时间】：2021-08-01 12:18:43

【问题描述】：

我有一个需求，我需要设计一个带有搜索图标的搜索框。我在下面编写了 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" 屏幕上可以正常工作。在更大的屏幕上，它会显示下面的图像。

【问题讨论】：

将输入设置为位置：相对，将跨度设置为位置：绝对，并应用让我们说对：0； top: 0 到跨度，那么跨度将坚持在输入的右侧，无论您如何调整浏览器的大小

@Kenny 这没有帮助。还是一样的错误。就像它在更大的屏幕尺寸上打破了输入框位置：相对和跨度作为位置：绝对。

【参考方案1】：

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

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

这里是sn-p

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