请教如何实现导航菜单两端对齐

2016-07-07 16:03 来源：www.chinab4c.com 作者：ecshop专家

Commodity模板，如何实现导航菜单向两端自动伸缩对齐。
目前是左对齐： 1.jpg
想修改成这样的两端对齐： 2.jpg

目前的CSS代码如下：
  1. /* ====================header==================== */
  2. .headerTop{
  3. height:65px;
  4. overflow:hidden;
  5. }
  6. .headerTop .logo{
  7. float:left;
  8. line-height:65px;
  9. }
  10. .headerTop .logo img{
  11. vertical-align:middle;
  12. *margin-top: expression(( 65 - this.height ) / 2);
  13. margin-left:0;
  14. }
  15. .headerTop .topNav{
  16. width:700px;
  17. line-height:30px;
  18. margin:0 5px 0 0;
  19. }
  20. .headerTop #ECS_CARTINFO{
  21. background:url(images/bg.gif) no-repeat 0 0;
  22. padding-left:20px;
  23. }
  24. .shopNav{
  25. height:51px;
  26. background:url(images/navbg.gif) repeat-x 0 0;
  27. overflow:hidden;
  28. }
  29. .shopNav .searchForm{
  30. width:260px;
  31. height:40px;
  32. background:#fff;
  33. margin:4px 12px 0 0;
  34. padding:5px 8px 5px 8px;
  35. }
  36. .shopNav .searchForm .searchgo{
  37. width:20px;
  38. height:17px;
  39. background:url(images/bg.gif) no-repeat 0 -32px;
  40. border:none;
  41. }
  42. .shopNav .navList{
  43. float:left;
  44. }
  45. .shopNav .navList li{
  46. float:left;
  47. line-height:51px;
  48. padding:0 12px;
  49. background:url(images/navbgline.gif) no-repeat right center;
  50. }
  51. .shopNav .navList li.cur{
  52. font-weight:bold;
  53. }
  54. .shopNav .navList li a,.shopNav .navList li.cur a{
  55. color:#fff;
  56. }
复制代码


修改CSS里的float:left;属性，只能左右或居中，不能两端对齐，请高手们帮帮看，要如何修改才能实现两端自动伸缩对齐。

回答：
固定宽度

纯CSS问题。

ECSHOP学习资料：http://www.phpally.com

.shopNav .navList li 用百分比的宽度5个就20%;依次类推,然后给li a设置display:block; 文字居中即可.

自己研究研究不就解决了 IT认证

  1. /* ====================header==================== */
  2. .headerTop{
  3. height:65px;
  4. overflow:hidden;
  5. }
  6. .headerTop .logo{
  7. float:left;
  8. line-height:65px;
  9. }
  10. .headerTop .logo img{
  11. vertical-align:middle;
  12. *margin-top: expression(( 65 - this.height ) / 2);
  13. margin-left:0;
  14. }
  15. .headerTop .topNav{
  16. width:700px;
  17. line-height:30px;
  18. margin:0 5px 0 0;
  19. }
  20. .headerTop #ECS_CARTINFO{
  21. background:url(images/bg.gif) no-repeat 0 0;
  22. padding-left:20px;
  23. }
  24. .shopNav{
  25. height:51px;
  26. background:url(images/navbg.gif) repeat-x 0 0;
  27. overflow:hidden;
  28. }
  29. .shopNav .searchForm{
  30. width:260px;
  31. height:40px;
  32. background:#fff;
  33. margin:4px 12px 0 0;
  34. padding:5px 8px 5px 8px;
  35. }
  36. .shopNav .searchForm .searchgo{
  37. width:20px;
  38. height:17px;
  39. background:url(images/bg.gif) no-repeat 0 -32px;
  40. border:none;
  41. }
  42. .shopNav .navList{
  43. float:left;
  44. }
  45. .shopNav .navList li{
  46. float:left;
  47. line-height:51px;
  48. width:16.6%;//修改过的,如果放7个链接,就是(100除以7)%,依次类推
  49. background:url(images/navbgline.gif) no-repeat right center;
  50. }
  51. .shopNav .navList li.cur{
  52. font-weight:bold;
  53. }
  54. .shopNav .navList li a,.shopNav .navList li.cur a{
  55. color:#fff;
  56. display:block; text-align:center; //修改过的,
  57. }
复制代码

好難的問題~解答還要多花時間看一下@@

好難的問題~解答還要多花時間看一下@@

本人来学习了。

来学习一下看怎么解决。




衷心感谢adcode。