有没有办法将两个水平 html 列表放在同一行页面的相对两侧？

Question

我一直在尝试将两个列表水平显示在同一行上。一个在左边对齐，另一个在右边对齐。我一直在使用 float 使列表水平移动并将它们移动到正确的一侧，但无论我做什么，它们都不会在同一条线上。

如果你能帮我解决这个问题，先谢谢你了。我的代码如下。

img{
  width: 100px;
  height: 100px;
}
#left{
color: black;
font-size: 24px;
}
#left li{
  padding: 10px;
  float: left;
  display: block;
}
#left_list{
  width: 70%;
  clear: right;
}
#right{
  color: black;
  font-size: 24px;
}
#right li{
  padding: 10px;
  float: right;
  display: block;
}
#right_list{
  width: 30%;
  float: right;
  clear: left;
}
ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: hotpink;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <script src="script.js"></script>
    <div id="left_list">
      <div id="left">
        <ul>
          <li><img src=""></li>
          <li><a href="/index">Home</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </div>
    <div id="right_list">
      <div id="right">
        <ul>
          <li><a href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li><a href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
          <li><a   href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Answer 1

使用 display: flex 将 left_list 和 right_list 换行。

其他解决方案：为 #left_list 和 #right_list 添加 display: inline-block;。

body {
  display: flex;
}
img {
  width: 100px;
  height: 100px;
}

#left {
  color: black;
  font-size: 24px;
}

#left li {
  padding: 10px;
  float: left;
  display: block;
}

#left_list {
  width: 70%;
  clear: right;
}

#right {
  color: black;
  font-size: 24px;
}

#right li {
  padding: 10px;
  float: right;
  display: block;
}

#right_list {
  width: 30%;
  float: right;
  clear: left;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: hotpink;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <script src="script.js"></script>
  <div id="left_list">
    <div id="left">
      <ul>
        <li><img src=""></li>
        <li><a href="/index">Home</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div>
  </div>
  <div id="right_list">
    <div id="right">
      <ul>
        <li><a href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
        <li><a href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
      </ul>
    </div>
  </div>
</body>

</html>

有没有办法将两个水平 html 列表放在同一行页面的相对两侧？

Is there a way to put two horizontal html lists on opposite sides of a page on the same line?

html

css

html-lists