Div 未在 UL - LI 中相互對齊

Question

我想要 4 個帶有天氣信息的盒子。 我對一切都很滿意，但盒子的頂部在不同的位置。 我如何讓它們排在頂部？ 完全初學者。 我不確定這是否是實現我想要的最佳方式。

 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 的答案中，您應該考慮使用更多語義和可訪問的標記。 不要使用帶有<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>