有没有办法在HTML5中对齐<p>？

Question

body {
  font-family: Raleway, sans-serif;
}

h1 {
  width: 100%;
  font-weight: 300;
  text-align: center;
  font-size: 40px;
  color: #D6B47E;
}

h2 {
  display: inline-block;
  text-align: center;
  background-color: #D6B47E;
  padding: 3px 10px;
  margin: 5px;
  font-size: 1.75rem;
  color: white;
}

.menu {
  border: 2px solid;
  text-align: center;
  width: 200px;
}

h3 {
  display: inline-block;
  font-weight: 800;
  background-color: #ffffff;
  text-align: center;
  padding: 10px 25px;
}

.container {
  min-width: 775px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hero {
  background-size: cover;
  min-width: 964px;
  min-height: 422px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/cafe.jpg");

}

.container a {
  color: black;
  text-decoration: none;
}

.supporting-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 45px 0 0 0;
}

.supporting-container div {
  background-size: cover;
  min-width: 450px;
  min-height: 345px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30px;
}

.upcoming {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/events.jpg");

}

.roast {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/roast.jpg");

}

#footer {
  color: #D6B47E;
  width: 300px;
  font-weight: 300;
  font-size: 1.5rem;
  border: 1px solid #D6B47E;
  border-radius: 10px;
  display: block;
  margin-right: 0;
}

#footer:active {
  position: relative;
  top: 2px;
}

#footer:hover {
  background-color: #D6B47E;
  color: white;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 525px;
}

ul li {
  font-size: 1rem;
  display: inline;
  text-align: justify;
  margin-left: 50px;
}

<link href='https://fonts.googleapis.com/css?family=Raleway:300,800' rel='stylesheet' type='text/css'>

<div class="container" id="top">
  <h1>Cupful Cafe</h1>
  <div class="hero">
    <div class="hero-content">
      <div>
        <h2>Organic Tea and Coffee</h2>
      </div>
      <div>
        <h2>Freshly Baked Pastries</h2>
      </div>

      <h2>Free Wifi</h2>

      <div>
        <h3><a href="Menu.html">Read Our Menu </a></h3>
      </div>
    </div>
  </div>
</div>

<div class="supporting-container">
  <div class="upcoming">
    <h3>Upcoming events</h3>
  </div>
  <div class="roast">
    <h3>Today's Roast</h3>
  </div>
</div>
<div>
  <ul>
    <li>About</li>
    <li>Social Networks</li>
    <li>Privacy Policy</li>
  </ul>

  <p id="footer">Contact Us</p>
</div>

<a href="#top">back to top</a>

问题是，我正在尝试将“与我们联系”按钮移到列表右侧页面的右侧。由于某种原因我不能。当我尝试使用Flow时，它位于右侧，但位于列表下方，而不是旁边。

我想问的另一个问题是：有没有办法使列表和图片下方的“联系我们”对齐？图片设置为背景图像，所以我不确定该怎么做。而当我尝试使用左上/右上或右上边距时，它确实可以在全屏模式下工作，但是当我更改页面的大小时，它会变得混乱。

Answer 1

如果要在左右两侧有两个元素，则应将它们放在两个Div标签上，然后使用 float 属性将它们向左或向右对齐。

阅读详细信息：https://www.w3schools.com/csSref/pr_class_float.asp

Answer 2

body {
  font-family: Raleway, sans-serif;
}

h1 {
  width: 100%;
  font-weight: 300;
  text-align: center;
  font-size: 40px;
  color: #D6B47E;
}

h2 {
  display: inline-block;
  text-align: center;
  background-color: #D6B47E;
  padding: 3px 10px;
  margin: 5px;
  font-size: 1.75rem;
  color: white;
}

.menu {
  border: 2px solid;
  text-align: center;
  width: 200px;
}

h3 {
  display: inline-block;
  font-weight: 800;
  background-color: #ffffff;
  text-align: center;
  padding: 10px 25px;
}

.container {
  min-width: 775px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hero {
  background-size: cover;
  min-width: 964px;
  min-height: 422px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/cafe.jpg");

}

.container a {
  color: black;
  text-decoration: none;
}

.supporting-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 45px 0 0 0;
}

.supporting-container div {
  background-size: cover;
  min-width: 450px;
  min-height: 345px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30px;
}

.upcoming {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/events.jpg");

}

.roast {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/roast.jpg");

}

#footer {
  color: #D6B47E;
  width: 300px;
  font-weight: 300;
  font-size: 1.5rem;
  border: 1px solid #D6B47E;
  border-radius: 10px;
  display: block;
  margin-right: 0;
}

#footer:active {
  position: relative;
  top: 2px;
}

#footer:hover {
  background-color: #D6B47E;
  color: white;
}

ul {
  list-style-type: none;
  padding: 0px;
}
.listing {
  display:flex;
}
ul li {
  font-size: 1rem;
  display: inline;
  text-align: justify;
  margin-left: 50px;
}

<link href='https://fonts.googleapis.com/css?family=Raleway:300,800' rel='stylesheet' type='text/css'>

<div class="container" id="top">
  <h1>Cupful Cafe</h1>
  <div class="hero">
    <div class="hero-content">
      <div>
        <h2>Organic Tea and Coffee</h2>
      </div>
      <div>
        <h2>Freshly Baked Pastries</h2>
      </div>

      <h2>Free Wifi</h2>

      <div>
        <h3><a href="Menu.html">Read Our Menu </a></h3>
      </div>
    </div>
  </div>
</div>

<div class="supporting-container">
  <div class="upcoming">
    <h3>Upcoming events</h3>
  </div>
  <div class="roast">
    <h3>Today's Roast</h3>
  </div>
</div>
<div style="display:flex;">
  <ul>
    <li>About</li>
    <li>Social Networks</li>
    <li>Privacy Policy</li>
  </ul>

  <p id="footer" style="margin-left: auto;">Contact Us</p>
</div>

<a href="#top">back to top</a>

我希望您需要这个，您只需要将显示范围灵活设置为ul和P的父级，并向左空白：自动设置为P，如果需要其他任何功能，请告诉我