在同一行上的页脚上对齐文字

Question

请看一下这张照片，它可以解释更好https://gyazo.com/333FC2EF04F5558480386B7BE67EB1BDA

我的网页底部有一个橙色页脚，我希望在页脚栏内的同一条线上对齐"左"，"中心"one_answers"右"。

现在，文本已经对齐，但是文本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;
}

Answer 2

您可以以许多不同的方式实现它。

@Vestride给了您一种方法。

另一种方法是添加另一个选择器：

#footer div{
  display: block;
  float: left;
  width: 30%;
}

或

#footer div{
  display: inline-block;
  width: 30%;
}

这将选择#footer内的所有div并对齐它们。我们将三个div宽度分开以使其对齐。因此，由于width: 100%甚至是。我们需要从中减去10％才能将其用于保证金，其余的将除以3。因此每个DIV将为页脚宽度的30％。这样，它将在同一条线上。请记住，任何元素的宽度的100％都将在单独的线上。意思是，如果同一条线中的两个Divs具有100％的宽度，则它们将彼此之间，但是如果它们之间的宽度划分(每个宽度为50％(，则它们将处于同一行。

您可以使用相同的想法，并以自己的方式发挥创造力。由于有各种方法可以在CSS中获得不同的方法。只需选择您喜欢的一个即可。