Question

我想在我的网站上添加一个页脚，但文字一直在移动。

<div id="footer">
  <div id="footerchild">
    <a href=".html">1</a>
  </div>
  <div id="footerchildone">
    <a href=".html">2</a>
  </div>
  <div id="footerchildtwo">
    <a href=".html">3</a>
  </div>
  <div id="footerchildthree">
    <a href=".html">4</a>
  </div>
</div>

和css

#footer {
  margin-left: 100px;
  background: #812;
  box-shadow: 1px 2px 40px 1px #444;
  border: 1px solid black;
  width: 1040px;
  height: 300px;
  position: absolute;
}

#footerchildone {
  float: right;
  margin-right: 500px;
  margin-top: -22px;
}

#footerchildtwo {
  float: right;
  margin-right: 350px;
  margin-top: -22px;
}

#footerchildthree {
  float:right;
  margin-top: -22px;
  margin-right: -250px;
}

我希望每列都以特定的距离进行集中，但是当我移动例如childthree时，第二个孩子会跟随它。它应该是那样的，因为我给了他们每个人一个单独的div。有什么问题？

Answer 1

我想你正试图做到这一点：

http://jsfiddle.net/65GaS/5/

这很简单，或者我误解了你。

Answer 2

http://jsfiddle.net/vvjAJ/

HTML

<div id="footer">
<div id="footerchild"><a href=".html">1</a></div>
<div id="footerchildone"><a href=".html">2</a></div>
<div id="footerchildtwo"><a href=".html">3</a></div>
<div id="footerchildthree"><a href=".html">4</a></div>
</div>

HTML

#footer
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;}
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;}
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;}

Answer 3

您需要添加text-align：center以将父div的文本居中，并将每个子div设为position：relative;显示：内联块;自动它将对齐父div的中心，并确保删除浮点数：对于子div。希望这对你有用。

使用嵌套div的页脚

3 个答案: