在同一行上对齐 div [重复]答案

【问题标题】：Align Divs on Same Line [duplicate]在同一行上对齐 div [重复]
【发布时间】：2020-02-16 13:06:08
【问题描述】：

我有两个 div 元素，我想将它们对齐在同一行。我已经或多或少地尝试了一切，他们仍然在彼此之下。

我的代码如下

body {
  background-color: #1b1b1b;
  padding-left: 4%;
  font-family: Helvetica;
}

h1 {
  font-size: 40px;
  color: white;
}

.important {
  color: #5a92f0;
}

.left-side {
  float: left;
  display: inline-block;
  margin: 10px;
  padding-right: 50%;
}

.signup {
  float: right;
  background-color: white;
  padding-left: 5%;
  padding-right: 5%;
  border-radius: 5px;
  border: 1px solid white;
  text-align: center;
  display: inline-block;
  margin: 10px;
}

.signup p {
  font-size: 12px;
}

.signup h3 {
  font-size: 17px;
}

.signup a {
  color: #383737;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #000;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #5a92f0;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

<div>
  <div class="left-side">
    <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>
  </div>
  <div class="signup">
    <h2> Lorem ipsum dolor sit </h2>
    <h3> Lorem ipsum dolor sit amet </h3>
    <input id="email" name="emailaddress" placeholder="user@example.com" type="text">
    <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>
    <input value="Submit" type="submit">
    <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>
  </div>
</div>

发生的情况是一个 div 显示在上方，而另一个 div 显示在第一个 div 下方的中心。我希望他们站在彼此的另一边。

【问题讨论】：

标签： html css

【解决方案1】：

我建议研究一下 flexbox，它可以帮助解决对齐问题，并且可以很好地替代浮动。我已经将 body 设置为 display: flex，并将左右 div 设置为 flex: 1。

这应该可行：

<style>
  body {
    background-color: #1b1b1b;
    padding-left: 4%;
    font-family: Helvetica;
    display: flex;
    align-items: center;
  }
  
  h1 {
    font-size: 40px;
    color: white;
  }
  
  .important {
    color: #5a92f0;
  }
  
  .left-side {
    flex: 1;
    display: inline-block;
    margin: 10px;
    padding-right: 10%;
  }
  
  .signup {
    flex: 1;
    background-color: white;
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 5px;
    border: 1px solid white;
    text-align: center;
    display: inline-block;
    margin: 10px;
  }
  
  .signup p {
    font-size: 12px;
  }
  
  .signup h3 {
    font-size: 17px;
  }
  
  .signup a {
    color: #383737;
  }
  
  input[type=text],
  select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  input[type=submit] {
    width: 100%;
    background-color: #5a92f0;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
<div class="left-side">
  <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>
</div>
<div class="signup">
  <h2> Lorem ipsum dolor sit </h2>
  <h3> Lorem ipsum dolor sit amet </h3>
  <input id="email" name="emailaddress" placeholder="user@example.com" type="text">
  <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>
  <input value="Submit" type="submit">
  <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>
</div>

【讨论】：