0

我正在尝试向我的网站添加页脚，但文本一直在移动。

<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。问题是什么？

4

3 回答 3

1

我想你正在努力做到这一点：

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

就这么简单，不然我误会你了。

于 2012-05-31T11:07:11.807 回答
0

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;}
于 2012-05-31T11:20:37.007 回答
0

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

于 2012-05-31T11:49:51.813 回答