时间戳

首页 > 解决方案 > 如何使用 HTML 和 CSS 正确设置网页页脚部分的文本对齐格式

html - 如何使用 HTML 和 CSS 正确设置网页页脚部分的文本对齐格式

问题描述

我正在尝试格式化网页的页脚部分，以便地址及其相应信息与联系信息平行。基本上，所有地址信息都在左侧，联系信息在右侧，并且理想情况下统一对齐。我尝试更改一些参数并添加参数以尝试更正格式。

这是我得到的输出。

在此处输入图像描述

关于如何纠正这个问题的任何建议？这是上下文的代码。

HTML

<!DOCTYPE html>
<html>
<div class="footer-row">
<div class="footer-left">
    <h1>Address</h1>
    <p><strong>Name of place</strong><br>
       <em>at the intersection of such and such</em><br>
       111 address st <br>
       City Name, State 12345 <br>
    </p>
</div>
<div class="footer-right"></div>
    <h1>Contact</h1>
    <p>
       111-222-3333 <br>
       email@email.com<br>
    </p>
</div>
</div>
</html>

CSS

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

标签： htmlcssformattingfooter

解决方案

添加flex-direction: column; 并删除 div 结束标签

<div class="footer-right"></div>


.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    
    flex-direction: row;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}
<div class="footer-row">
  <div class="footer-left">
      <h1>Address</h1>
      <p><strong>Name of place</strong><br>
         <em>at the intersection of such and such</em><br>
         111 address st <br>
         City Name, State 12345 <br>
      </p>
  </div>
  <div class="footer-right">
      <h1>Contact</h1>
      <p>
         111-222-3333 <br>
         email@email.com<br>
      </p>
  </div>
</div>

推荐阅读