如何将div元素水平对齐到另一个div？

Question

我创建了以下html页面，我将两个DIV元素（包含在lista div中的scheda和parent id）对齐到同一位置，页面顶部。这是我的代码：

＆＃13;

＆＃13;

#tabella1,
#tabella1 td {
  border: solid 1px;
}
th {
  border: solid 1px;
  font-style: bold;
  background-color: white;
}
#tabella1 tr:nth-child(odd) {
  background-color: gray;
}
#tabella1 tr:nth-child(even) {
  background-color: lightgray;
}
#tabella1 tr:nth-child(n):not(:nth-child(1)):hover {
  background-color: blue;
  color: yellow;
  cursor: pointer;
}
.titolo {
  text-align: center;
  font-weight: bold;
}
#lista {
  display: inline-block;
  margin: 30px;
  position: relative;
  top: 0px;
}
button {
  width: 60px;
  height: 20px;
}
form {
  display: inline-block;
}
#msg {
  font-weight: bold;
}
#scheda {
  display: inline-block;
  position: relative;
  top: 0px;
  text-align: center;
}
#tabella2 td:nth-child(even) {
  border: solid 1px;
}
.cellaVuota {
  width: 140px;
}

＆＃13;

<div id="carica">
  <form method="post" action="carica2.php">
    <label for "n">Inserisci nome:
      <input type="text" id="n" name="nome" size="10" />
    </label>
    <button type="submit">Invia</button>
  </form>
  <form method="post" action="carica2.php">
    <button type="submit" name="logout">Logout</button>
  </form>
</div>
<div id="parent">
  <div id="lista">
    <table id="tabella1">
      <tr>
        <th>Modello</th>
        <th>27.5</th>
        <th>29</th>
      </tr>
      <tr>
        <td>Riga 1</td>
        <td>Riga 2</td>
        <td>Riga 3</td>
      </tr>
    </table>
    <p class="titolo">Bici Mountain Bike</p>
  </div>
  <div id="scheda">
    <p class="titolo">Bici selezionata</p>
    <table id="tabella2">
      <tr>
        <td>Modello</td>
        <td class="cellaVuota"></td>
      </tr>
      <tr>
        <td>Misura 27.5</td>
        <td class="cellaVuota"></td>
      </tr>
      <tr>
        <td>Misura 29</td>
        <td class="cellaVuota"></td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我在发布此问题之前在这里进行了搜索和搜索（请参阅css代码中的position和~top`属性），但我不知道如何实现我的目的。

Answer 1

只需将vertical-align: top;添加到两个div即可。 您还可以删除position: relative;和top: 0;属性

Answer 2

将float: left属性添加到css中的#lista块。