如何使用CSS将图像旁边的表单元素对齐？

debugcn 发表于 Dev

激进活动

我想使用Bootstrap 4将a label，atext-input和一个X符号彼此对齐。

我设法使label和对齐，text-input但似乎无法通过X标志进行对齐。

JSFiddle：https：//jsfiddle.net/jptyuv5n/

我们如何X在输入字段旁边对齐该符号？我在这里想念什么？

.collection {
  display: flex;
}

.collection img {
  float: left;
  width: 150px;
}

.collection .form {
  display: inline-block;
  width: 100%;
  margin: 0px 15px;
}

.collection .form input {
  display: inline-block;
  width: 100%;
}

<div class="row">
  <div class="col-6 collection">
    <img src="https://via.placeholder.com/150/771796">
    <div class="form">
      <label>Text</label>
      <input type="text" name="text1">
      <span>X</span>
    </div>
  </div>
  <div class="col-6 collection">
    <img src="https://via.placeholder.com/150/771796">
    <div class="form">
      <label>Text</label>
      <input type="text" name="text2">
      <span>X</span>
    </div>
  </div>
</div>

伊万卡·托多罗娃（Ivanka Todorova）

编辑：我只是在您的问题中看到您提到了Bootstrap4。使用引导程序样式和来自您的0 CSS行可以实现相同的结果。

下面的代码段中使用的类记录在这里：https : //getbootstrap.com/docs/4.0/components/forms/#overview

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 collection">
    <div class="row">
      <div class="col-3">
        <img src="https://via.placeholder.com/150/771796">
      </div>
      <div class="col-9">
        <div class="form-row align-items-center">
          <div class="col-sm-3 my-1">
            <label>text</label>
            <div class="input-group">
              <input type="text" class="form-control" />
              <div class="input-group-append">
                <div class="input-group-text">X</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

旧答案：

你可以包装<input>和<span>保持x在一个div并在其上使用的柔性。

.collection {
  display: flex;
}

.collection img {
  float: left;
  width: 150px;
}

.collection .form {
  display: inline-block;
  width: 100%;
  margin: 0px 15px;
  flex-direction: column; /* <- changed flex direction of form */
}

.collection .form input {
  display: inline-block;
  width: 100%;
}

.input-with-x { /* <- new classes added */
  display: flex; 
}

<div class="row">
    <div class="col-6 collection">
      <img src="https://via.placeholder.com/150/771796">
      <div class="form">
        <label>Text</label>
        <div class="input-with-x"> <!-- <- new class used -->
        <input type="text" name="text2">
        <span>X</span>
        </div>
      </div>
    </div>
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。