Question

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

我的网页底部有一个橙色的页脚，我希望文本对齐＆＃34;左＆＃34;，＆＃34;中心＆＃34;和＆＃34;对＆＃34;在页脚栏内的同一行。

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

OR

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

这将选择div内的所有#footer并对齐它们。我们将三个div宽度划分为均匀对齐。所以，因为width: 100%是偶数。我们需要从中减去10％才能使用它作为保证金，剩下的将除以3.所以每个div将是页脚宽度的30％。这样它就会在同一条线上。请记住，任何元素都有100％的宽度将在一个单独的行上。这意味着，如果同一行中的两个DIV具有100％的宽度，它们将在彼此之下，但如果它们之间的宽度（它们中的每一个都是50％宽度），则它们将处于同一行。

您可以使用相同的想法，并以自己的方式发挥创意。因为在CSS中可以以不同方式实现各种方法。只需选择你最喜欢的一个来做。

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

2 个答案: