Question

我的<footer>存在问题。 <footer>的任何子元素都将放在它之外。

如何将子元素放在<footer>中并从左到右对齐孩子？

＆＃13;

footer{
  background-color: black;
  height: 100px;
}
footer > a,
#link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100%;
  background-color: yellow;
}
#damn{
  background-color: red;
  width: 100px;
  height: 100px;
}

＆＃13;

<footer>
  <a href="#">
    <div id="link">
      here we go again
    </div>
  </a>
  <div id="damn">
  </div>
  why the hell
</footer>

＆＃13;

Answer 1

显示flex属性应该给父元素，以便子对应于align-items（cross axis）和justify-contents（main axis）的属性。

footer{
      background-color: black;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

Answer 2

在你的CSS中，你将所有元素的高度设置为100px - 所以你的A标签填满了你的页脚的所有高度，而你的＃34;该死的＆＃34;标签无处可去，但低于页脚。

编辑：好的，所以你希望页脚中的元素从左到右。给页脚的直接孩子display:inline-block。您可以将display:flex放在A标记内的div div上。

子元素在父页脚元素之外

2 个答案: