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

默认情况下，图像和输入均为display:inline

因此，默认情况下，它们将彼此相邻放置。

如果您希望它们垂直居中，请添加此

 vertical-align: middle;

同时输入图像和输入。

.parent {}

img {
  height: 30px;
  width: 30px;
  margin-right: 5px;
}

img,
input {
  vertical-align: middle;
}

<div class="parent">
  <img src="https://placehold.it/50x50" />
  <input type="text" />
  <div>

使用引导程序

img {
  margin-right: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col d-flex align-items-center">
      <img src="https://placehold.it/50x50" alt="" width="30" height=30 />
        <input type="text" id="fname" name="firstname" class="form-control" placeholder="Enter Text" >
    </div>
      <div class="col d-flex align-items-center">
      <img src="https://placehold.it/50x50" alt="" width="30" height=30 />
        <input type="text" id="fname" name="firstname" class="form-control" placeholder="Enter Text" >
    </div>
  </div>
  <div class="row">
     <div class="col d-flex align-items-center">
      <img src="https://placehold.it/50x50" alt="" width="30" height=30 />
        <input type="text" id="fname" name="firstname" class="form-control" placeholder="Enter Text" >
    </div>
     <div class="col d-flex align-items-center">
      <img src="https://placehold.it/50x50" alt="" width="30" height=30 />
        <input type="text" id="fname" name="firstname" class="form-control" placeholder="Enter Text" >
    </div>
    <div class="col d-flex align-items-center">
      <img src="https://placehold.it/50x50" alt="" width="30" height=30 />
        <input type="text" id="fname" name="firstname" class="form-control" placeholder="Enter Text" >
    </div>
  </div>  
</div>

Answer 2

我认为您应该使用这种样式。

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

希望获得帮助

让我知道进一步的澄清。

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

Answer 3

<!DOCTYPE html>
<html>
<head>
<style> 
input {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    padding: 12px 20px 12px 20px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    margin-left:40px;
}
.img
{
padding-top:10px;
height:30px;
position:absolute
}

</style>
</head>
<body>

<p>Animated search input:</p>

<form>
<
<img class="img" src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
  <input type="text" name="search" placeholder="Search..">
  <img class="img" src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
  <input type="text" name="search" placeholder="Search..">
  <img class="img" src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
  <input type="text" name="search" placeholder="Search..">
  <img class="img" src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
  <input type="text" name="search" placeholder="Search..">
  <img class="img" src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

没关系

CSS-在TextBox旁边对齐图片的最佳方法？

3 个答案: