CSS定位,需要帮助对齐链接

时间:2012-08-17 14:15:06

标签: css alignment positioning

在网站的所有catelog页面中,顶部的链接菜单未对齐,请参阅示例链接 - car finance部分。

*每当我们尝试将第三个链接放在顶部菜单左侧时 - 它会分割到下一行

右上方菜单中的相同问题 - 任何第4个链接都会分割到下一行*

我们尝试更改宽度 - 使用所有排列/组合 - 但没有帮助

我们寻求的是

  • .footer-top-box-left - 用于顶级菜单链接单元
  • .footer-top-box-right - 用于谷歌自定义搜索框

这样两者都有1个单行

下面是用于-pl建议的css代码

#footer-container { 
   float:left;
   width:1000px;
   clear:both;
   background:#FFFFFF;
   text-align:center !important;
}   

#footer-container .footer-top-box {
   float:left;
   width:965px;
   margin:0 0 10px 5px;
   padding:0 5px 0 10px;
   height:33px;
   background:url(../images/footer-box-bg.gif) repeat-x;
   border:1px solid #e7e5e5;
}    

.footer-top-box .footer-top-box-left {
   float:left;
   width:300px;
   margin:0 0 0 5px;
   font: normal 10px Arial, Helvetica, sans-serif;
   color:#000000;
   text-align:left;
   padding:10px 0 0 0
}    

.footer-top-box-left img {
   margin:0 3px 0 3px;
}    

.footer-top-box .footer-top-box-right {
   float:right;
   width:500px;
   margin:0 5px 0 0 ;
   font: normal 10px Arial, Helvetica, sans-serif;
   color:#000000;
   text-align:right;
   padding:10px 0 0 0;
}    

.footer-top-box-right p {

margin:0;
padding:0;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
}    

.footer-top-box-right p a:link,
.footer-top-box-right p a:hover,
.footer-top-box-right p a:visited { 
   margin:0;
   padding:0;
   font: normal 10px Arial, Helvetica, sans-serif;
   color:#b60205;
   text-decoration:underline;
   text-align:justify;
}

1 个答案:

答案 0 :(得分:1)

更改持有人div的宽度 - “footer-top-box-left”或“footer-top-box-right”,它应该有效。

使用html的副本进行测试我可以在将“footer-top-box-left”从300px更改为400px宽度后,在左侧添加第3项。

如果你想将盒子盒子作为一行,我建议你制作一个div,也许可以使用float:right用于必须与右边对齐的菜单项。