html - 将页脚上的文本对齐在同一行

Question

请看这张图片，它会解释得更好 https://gyazo.com/333fc2ef04f558480386b7be67eb1bda

我的网页底部有一个橙色的页脚，我希望文本在页脚栏内的同一行上“左”、“中”和“右”对齐。

现在文本已对齐，但文本 3 对齐位于彼此下方的 3 行。

这是我的 HTML:

<div class="row">
    <div id="footer">
    <div align="left"><h3>Contact</h3></div>
    <div align="center"><h3>Computerbasen</h3></div>
    <div align="right"><h3>Info</h3></div>
    </div>
  </div>

这是我的 CSS:

#footer {
    background-color: #FF7633;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    padding-top: 10px;
    position: absolute;
    bottom: 0;
    }

Answer 1

我推荐flexbox对于这种类型的布局。

删除 align 属性并将其添加到您的 #footer。

#footer {
  display: flex;
  justify-content: space-between;
}