html - CSS - 在文本框旁边对齐图片的最佳方式？

Question

我是一名 Web 开发新手，我想知道像这样在 TextBox 旁边对齐图片的最理想和最灵敏的方式是什么:

例子:

这是我到目前为止所做的:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="row">
        <div class="col-4">
          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" style="position:fixed; z-index:999; float:left" width="30" height=30 />
          <div style="padding-left:35px">
            <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
          </div>
    
        </div>
    
        <div class="col-4">
          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" style="position:fixed; z-index:999; float:left" width="30" height=30 />
          <div style="padding-left:35px">
            <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
          </div>
    
        </div>
    
        <div class="col-4">
          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" style="position:fixed; z-index:999; float:left" width="30" height=30 />
          <div style="padding-left:35px">
            <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
          </div>
    
        </div>
    
    
    
      </div>
    
      <div class="row" style="padding-top:20px">
        <div class="col-3">
          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" style="position:fixed; z-index:999; float:left" width="30" height=30 />
          <div style="padding-left:35px">
            <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
          </div>
    
        </div>
    
        <div class="col-3">
          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" style="position:fixed; z-index:999; float:left" width="30" height=30 />
          <div style="padding-left:35px">
            <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
          </div>
    
        </div>
    
        <div class="col-3">
          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" style="position:fixed; z-index:999; float:left" width="30" height=30 />
          <div style="padding-left:35px">
            <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
          </div>
    
        </div>
        <div class="col-3">
          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" style="position:fixed; z-index:999; float:left" width="30" height=30 />
          <div style="padding-left:35px">
            <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
          </div>
    
        </div>
    
    
    
    
      </div>
    
    </div>

https://jsfiddle.net/hojqx3v8/

这似乎行得通，但对我来说它更像是一个 hack，而不是一个正确的解决方案。有没有更好的方法来实现我想要的？

谢谢!

Answer 1

我的意见是你应该使用这种风格。

在移动或桌面 View 中也易于管理

希望对你有帮助

让我知道进一步的说明。

.col-4, .col-3 {
display: flex;
align-items: center;
justify-content: left;
margin: 24px 0;
}
.col-4 img, .col-3 img {
max-width: 30px;
}

<div class="container">
  <div class="row">
    <div class="col-4">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" >
      <div style="padding-left:20px">
        <input type="text" id="fname" name="firstname" placeholder="Enter Text" >
      </div>

    </div>

    <div class="col-4">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" >
      <div style="padding-left:20px">
        <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
      </div>

    </div>

    <div class="col-4">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" >
      <div style="padding-left:20px">
        <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
      </div>

    </div>



  </div>

  <div class="row" style="padding-top:20px">
    <div class="col-3">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" >
      <div style="padding-left:20px">
        <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
      </div>

    </div>

    <div class="col-3">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" >
      <div style="padding-left:20px">
        <input type="text" id="fname" name="firstname" placeholder="Enter Text" >
      </div>

    </div>

    <div class="col-3">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="" >
      <div style="padding-left:20px">
        <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
      </div>

    </div>
    <div class="col-3">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt=""/>
      <div style="padding-left:20px">
        <input type="text" id="fname" name="firstname" placeholder="Enter Text" style="width:100%">
      </div>

    </div>




  </div>

</div>