Div не выравниваются друг с другом в UL - LI

Question

Я хочу иметь 4 коробки с информацией о погоде в них. Я доволен всем, но вершины коробок находятся в разных местах. Как я могу заставить их выстроиться в ряд наверху? Тотальный новичок. Я не уверен, что это даже лучший способ достичь 1008 * того, чего я хочу.

ul {
  list-style: none;
  position: relative;
  top: 3em;
}

div {
  border: 3px solid white;
  padding: 10px 30px 10px 30px;
  position: 30px;
  margin: auto;
  display: inline-block;
  width: 100px;
  height: 350px;
  text-align: left;
  background: gray;
  color: black;
}

<h1>City Name</h1>
<ul>
  <li>
    <div>
      <h1>Current</h1>
      <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
      <h2>12oC</h2>
      <h3>Feels: 9oC</h3>
      <h3>Mostly Sunny</h3>

    </div>
    <div>
      <h1>Today</h1>
      <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
      <h2>15oC Hi</h2>
      <h3>Mostly Sunny</h3>
    </div>
    <div>
      <h1>Tonight</h1>
      <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
      <h2>-63oC Lo</h2>
      <h3>Mostly Cloudy</h3>
    </div>
    <div>
      <h1>Details</h1>
      <img id="flag" src="./flags/by.png">
      <h3>Wind CHill: -5oC</h3>
      <h3>Sunrise: 05:00</h3>
      <h3>Sunset: 16:00</h3>
    </div>
  </li>
</ul>

Answer 1

Чтобы добавить @ j08691 к ответу , вам следует рассмотреть возможность использования большего количества semanti c и доступной разметки. Вместо списка с <div> элементами и множеством элементов заголовков рассмотрите возможность использования <article>, <section> и <dl> элементов с соответствующие заголовки:

section {
  border: 3px solid white;
  padding: 10px 30px 10px 30px;
  position: 30px;
  margin: auto;
  display: inline-block;
  width: 100px;
  height: 350px;
  text-align: left;
  background: gray;
  color: black;
  vertical-align: top;
}
dt:after {
  content: ':';
}
dd {
  margin: 0 0 1em 0;
}

<article>
  <h1>City Name</h1>
  <section>
    <h2>Current</h2>
    <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
    <dl>
      <dt>Temperature</dt>
      <dd>12ºC</dd>
      <dt>Feels</dt>
      <dd>9ºC</dd>
      <dt>Conditions</dt>
      <dd>Mostly Sunny</dd>
    </dl>
  </section>
  <section>
    <h2>Today</h2>
    <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
    <dl>
      <dt>High</dt>
      <dd>15ºC</dd>
      <dt>Conditions</dt>
      <dd>Mostly Sunny</dd>
    </dl>
  </section>
  <section>
    <h2>Tonight</h2>
    <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
    <dl>
      <dt>Low</dt>
      <dd>-63ºC</dd>
      <dt>Conditions</dt>
      <dd>Mostly Cloudy</dd>
    </dl>
  </section>
  <section>
    <h2>Details</h2>
    <img id="flag" src="./flags/by.png">
    <dl>
      <dt>Wind Chill</dt>
      <dd>-5ºC</dd>
      <dt>Sunrise</dt>
      <dd>05:00</dd>
      <dt>Sunset</dt>
      <dd>16:00</dd>
    </dl>
  </section>
</article>

Answer 2

Вертикальное выравнивание по умолчанию для встроенных элементов в baseline. Измените его на вершину (или что-то отличное от базовой линии), и они выстроятся в линию:

ul {
  list-style: none;
  position: relative;
  top: 3em;
}

div {
  border: 3px solid white;
  padding: 10px 30px 10px 30px;
  position: 30px;
  margin: auto;
  display: inline-block;
  width: 100px;
  height: 350px;
  text-align: left;
  background: gray;
  color: black;
  vertical-align: top;
}

<h1>City Name</h1>
<ul>
  <li>
    <div>
      <h1>Current</h1>
      <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
      <h2>12oC</h2>
      <h3>Feels: 9oC</h3>
      <h3>Mostly Sunny</h3>

    </div>
    <div>
      <h1>Today</h1>
      <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
      <h2>15oC Hi</h2>
      <h3>Mostly Sunny</h3>
    </div>
    <div>
      <h1>Tonight</h1>
      <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
      <h2>-63oC Lo</h2>
      <h3>Mostly Cloudy</h3>
    </div>
    <div>
      <h1>Details</h1>
      <img id="flag" src="./flags/by.png">
      <h3>Wind CHill: -5oC</h3>
      <h3>Sunrise: 05:00</h3>
      <h3>Sunset: 16:00</h3>
    </div>
  </li>
</ul>