HTML/CSS : trouble displaying 2 divs in horizontal line?

Question

好的，这里有一些奇怪的 CSS 问题试图实现这一点，在每个水平居中的输入字段的右侧都有一个警告:

现在我有居中输入，但无论我用 float 做什么，甚至在 .warning div 上转换或翻译，我都无法实现这一点。

.warning {
  display: none;
  margin-top: 10px;
}

.warning p {
  color: #e85748;
  display: none;
  transform: translateX(105%) translateY(232%);
}

.ico-circle {
  width: 40px;
  position: absolute;
  height: 40px;
  border-radius: 50%;
  transform: translateX(720%) translateY(22%);
  background: #e85748;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  position: relative;
  width: 50%;
  float: center;
  margin: auto;
  margin-bottom: 9px;
}

input,
textarea {
  padding: 15px 15px;
  display: block;
  margin: auto;
  width: 200px;
  /* height: 100%; */
  color: #333333;
  border-color: #333333;
  border-radius: 15px;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  border: 4px solid #333333;
  line-height: 1.3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 13px;
  flex: 0 0 160px;
  width: 200px;
  background-color: transparent;
}

input:focus {
  outline: none !important;
  border: 4px solid #e85748;
  width: 250px;
  -webkit-transition: width .25s ease;
  transition: width .25s ease;
}

<div class="field-wrap">
  <input id="username" type="text" placeholder="Username" required autocomplete="off">
  <div class="warning" />
  <p>Hello world</p>
  <div class="ico-circle">
  </div>
</div>
</div>

<div class="field-wrap">
  <input type="password" placeholder="Password" required autocomplete="off">
  <div class="warning">
    <p>Hello world</p>
    <div class="ico-circle">
    </div>
    </input>
  </div>

  <a href="#" class='button -dark' id="register-btn">Register</a>
  <a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>

我在这里做错了什么？

Answer 1

您可以使用 flexbox 来完成但我不确定当输入更宽和/或旁边有警告时你希望它如何呈现。也许这足以为您指明正确的方向:

.warning {
  display: none;
}

.warning p {
  color: #e85748;
}

.ico-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e85748;
  order: -1;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  display: flex;
  position: relative;
  margin-bottom: 9px;
}

input,
textarea {
  padding: 15px 15px;
  margin: auto;
  width: 200px;
  /* height: 100%; */
  color: #333333;
  border-color: #333333;
  border-radius: 15px;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  border: 4px solid #333333;
  line-height: 1.3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 13px;
  width: 200px;
  background-color: transparent;
}

input:focus {
  outline: none !important;
  border: 4px solid #e85748;
  width: 250px;
  -webkit-transition: width .25s ease;
  transition: width .25s ease;
}

input:focus:invalid+.warning {
  display: flex;
}

<div class="field-wrap">
  <input id="username" type="text" placeholder="Username" required autocomplete="off" />
  <div class="warning">
    <p>Hello world</p>
    <div class="ico-circle">
    </div>
  </div>
</div>

<div class="field-wrap">
  <input type="password" placeholder="Password" required autocomplete="off" />
  <div class="warning">
    <p>Hello world</p>
    <div class="ico-circle">
    </div>
  </div>
</div>

<a href="#" class='button -dark' id="register-btn">Register</a>
<a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>