Question

我不知道如何用语言简洁地描述我要实现的目标，所以这是一张ASCII图片：

   (+1)  | Enter your phone number |
         | Enter your name         |

我有两个<input>，一个用于电话号码，另一个用于姓名。它们应该水平对齐（在同一“列”中）。

我也有一个<span>（国家代码，必须与电话号码一起输入的另一段数据）。这应该“挂断”左侧输入的电话号码。

我想使国家/地区代码垂直居中，以使其出现在电话号码输入的中间。

这似乎可以通过CSS Grid实现。我想知道：是否有不涉及CSS Grid的解决方案？

这里是我到目前为止的摘要。我正在使用“零位置大小：相对元素，其内容位于位置：绝对子元素”技术，将“国家/地区代码”元素从流程中排除，因此不会破坏水平对齐方式。

如您所见，它不会使国家/地区代码垂直居中。

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  position: relative;
  width: 0;
  height: 0;
}

.country-code {
  position: absolute;
  right: 1rem;
}

<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number"></input>
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name"></input>
      </div>
    </div>
  </body>
</html>

Answer 1

您几乎不错，只需在上部容器上使用position:absolute并仅调整左侧值即可，因为flexbox已经垂直居中（因此无需设置top）

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
  position:relative;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  position: absolute;
  left:-2rem;
}

<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number">
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name">
      </div>
    </div>
  </body>
</html>

另一个想法是像下面那样考虑负边距，而您不再需要position:absolute

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
  position:relative;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  margin-left:-30px;
  margin-right:30px;
  width:0;
}

<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number">
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name">
      </div>
    </div>
  </body>
</html>

您还可以翻译：

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
  position:relative;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  transform:translateX(-30px);
  width:0;
}

<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number">
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name">
      </div>
    </div>
  </body>
</html>

Answer 2

为什么不使用flexbox？网格可能有点过于强大

.wrapper {
  display:flex
}
input {
  width:300px
}

<div class="wrapper">
  <div class="country-code">
    (+1)
  </div>
  <div class="right">
  <div class="phone">
   <input type="phone" placeholder="Enter your phone numner">
  </div>
  <div class="name">
    <input type="text" placeholder="Enter your name">
    </div>  
  </div>
  
</div>

垂直对齐“悬空” div的元素，该div与其他元素水平对齐

2 个答案: