HTML - 在页面左侧和右侧同一行列出项目

Question

我正在创建一个网站，它将作为我的简历。我的名字居中，下面是我的联系方式。在左边，我将用两行写我的地址，在右边，我将用两行写我的电子邮件和电话。我为此使用 UL 标签。

这是我的代码：

<div class="container">
  <div class="fullName">
    <h1 class="title">My Name</h1>
  </div>
  <div>
    <ul style="float:left;">
      <ul>Address Line 1</ul>
      <ul>Address Line 2</ul>
    </ul>
  </div>
  <div>
    <ul style="float:right;">
      <ul>T: number here</ul>
      <ul>E: [email protected]</ul>
    </ul>
  </div>

正如你所看到的，我使用了 ul，我快速谷歌了一下，认为使用左浮动和右浮动会起作用。右边有效，但左边不行；它从页面左侧缩进，而右侧则一直向右缩进，这是一个屏幕截图：

正如你所知，我是一个新手，对 HTML 等完全没有背景。

Answer 1

实现所需布局的最简单方法是将两个元素包装在 a 中并将 flexbox 应用于 .您可以将 justify-content 属性设置为“space- Between”以在两个元素之间创建空间。这是代码：

   <div class="container">
        <ul>
            <!-- List 1 content here -->
        </ul>
        <ul>
            <!-- List 2 content here -->
        </ul>
    </div>

     <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
    </style>