我在代码中有两个div。我的问题是，如果不接触列表本身，我就无法将两个div 对齐在一起。在我看来，一侧的列表会影响另一侧，影响对齐方式。如何对齐两个div 以使它们调平？
https://jsfiddle.net/DeathAndDecay/9mdort1q/1/
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<style>
h1,
h2 {
color: #f9ff65;
text-shadow: rgba(0, 0, 0, 0.63) 0px 3px 5px;
}
h1 {
font-size: 2.5em;
font-weight: bolder;
font-variant: small-caps;
}
h2 {
font-size: 1.8em;
font-style: italic;
font-variant: small-caps;
}
li {
font-family: sans-serif, Arial;
font-size: 1em;
text-indent: 0.6em;
}
.container {
border: 5px solid black;
padding: 15px;
margin: 16px;
position:
}
</style>
</head>
<body bgcolor="teal">
<div class="container">
<div class="container" style="display: inline-block; height: 200px">
<h2>Favorites</h2>
<ol>
<li>Dark Colors</li>
<li>Computer</li>
<li>Foods</li>
</ol>
</div>
<div class="container" style="display: inline-block; height: 200px">
<h2>Hobbies</h2>
<ol>
<li>Reading Books</li>
<li>Computer Tinkering</li>
<li>Playing Games</li>
<li>Listening to Music</li>
</ol>
</div>
</div>
</body>
</html>
您可以使用 flexbox 检查下面的代码片段并在此处了解有关 flexbox 的更多信息：弹性框
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<style>
h1,
h2 {
color: #f9ff65;
text-shadow: rgba(0, 0, 0, 0.63) 0px 3px 5px;
}
h1 {
font-size: 2.5em;
font-weight: bolder;
font-variant: small-caps;
}
h2 {
font-size: 1.8em;
font-style: italic;
font-variant: small-caps;
}
li {
font-family: sans-serif, Arial;
font-size: 1em;
text-indent: 0.6em;
}
.container {
border: 5px solid black;
padding: 15px;
margin: 16px;
display:flex;
}
</style>
</head>
<body bgcolor="teal">
<div class="container">
<div class="container" style="display: inline-block; height: 200px">
<h2>Favorites</h2>
<ol>
<li>Dark Colors</li>
<li>Computer</li>
<li>Foods</li>
</ol>
</div>
<div class="container" style="display: inline-block; height: 200px">
<h2>Hobbies</h2>
<ol>
<li>Reading Books</li>
<li>Computer Tinkering</li>
<li>Playing Games</li>
<li>Listening to Music</li>
</ol>
</div>
</div>
</body>
</html>