Need to float the items on the list to the left to avoid the margin, but want to cent…

What I would like to happen is to have a menu of list items that are centered in the page. I displayed them as inline, had it centered and it looked great. But when I added decoration to the a:hover, I noticed there were about 3px of margin between the items. I had margin and padding set to 0 on everything in the list and list items. I found out that this is an auto margin of sorts from it being inline (inline-block). The suggestions I had seen were to leave it as inline and either do this:

  • ListItem1
  • ListItem2
  • ...

    or

  • ListItem1
  • ListItem2
  • ListItem3
  • ...

    However, it’s not the best for reading in either scenario. Is there any way that I can float my list items so that there is no margin between them, but have the menu centered in the page. Here is the code I’m using:

    And the CSS.

    #iccmenu
    {
        text-align:center;
    }
    
    #iccmenu ul
    {
        padding:0;
        margin:0;
    }
    
    #iccmenu ul li
    {
        float:left;
        list-style:none;
        border:0;
        border-left:1px solid black;
        font-size:18px;
        padding:0;
        margin:0;
    }
    
    #iccmenu ul li:first-child
    {
        border-left:0;
    }
    
    #iccmenu a
    {
        text-decoration:none;
        color:orange;
        text-shadow:1px 1px 0px grey;
        padding:7px 25px;
        margin:0;
    }
    
    #iccmenu a:hover
    {
        background-color:grey;
        text-shadow:none;
    }

    For the same code you’re using, if you want to keep them centered, try this on #iccmenu ul

    margin: 0 auto;
    display: table;

    http://jsfiddle.net/LepD9/

    Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

    阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
    本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
    酷辣虫 » 前端开发 » Need to float the items on the list to the left to avoid the margin, but want to cent…

    喜欢 (0)or分享给?

    专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

    使用声明 | 英豪名录