CSS定位，菜单列表对齐（需要帮助）

和我面临的问题与子菜单

对齐我希望将子菜单的末尾与“更多”选项的右边缘对齐，如箭头所指。

如果我使用正确的：-somepx; 它会要求我必须在镀铬不同的对齐这将是10px的而在野生动物园将是5px的

是有这个跨平台的解决方案。

的HTML代码：

<div id=header> 
    <ul id="menu"> 
     <li><a href="#">Get Closer</a></li> 
      <li><a href="#">Know your team</a></li> 
      <li><a href="#" class="more">More</a> 
       <ul> 
        <li><a href="#">Our Story</a></li> 
        <li><a href="#">Clients</a></li> 
        <li><a href="#">Testimonials</a></li> 
        <li><a href="#">Pricing</a></li> 
        <li><a href="#">Case Studies</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Get in touch</a></li> 
     </ul> 
</div>

的CSS代码

#header #menu { 
    margin-top: 25px; 
    padding: 0px; 
    float: right; 
    list-style:none; 
    clear: right; 
} 
#header #menu li { 
    padding: 10px 15px 6px 15px; 
    border: 1px solid #d2d2d2; 
    position:relative; 
    float: left; 
    margin-left: -1px; 
} 
#header #menu li:hover { 
    background-color: #fff; 
} 
#header #menu li:first-child { 
    border-radius: 55px 0 0 55px; 
    padding-left: 20px; 
} 
#header #menu li:last-child { 
    border-right: 1px solid #d2d2d2; 
    border-radius: 0 55px 55px 0; 
    padding-right: 20px; 
} 
#header #menu a { 
    display:block; 
    font: 20px 'Klavika Rg'; 
    text-transform: uppercase; 
} 
#header #menu .more:after { 
    content: "{"; 
    font-family: 'WebSymbols'; 
    font-size: 22px; 
    margin-left: 7px; 
    line-height: 0; 
} 
/*--- DROPDOWN ---*/ 
#header #menu ul{ 
    list-style:none; 
    position: absolute; 
    right: 0px; 
    margin: 0; 
    visibility: hidden; 
} 
#header #menu ul li{ 
    position: relative; 
    float: left; 
    margin-top: 0; 
    padding: 6px 10px 1px 10px; 
    margin-left: -1px; 
} 
#header #menu ul li:first-child { 
    border-radius: 15px 0 0 15px; 
    padding-left: 20px; 
} 
#header #menu ul li:last-child { 
    border-right: 1px solid #d2d2d2; 
    border-radius: 0 0 15px 0; 
    padding-right: 20px; 
} 
#header #menu ul a{ 
    white-space:nowrap; 
    font: 15px 'Klavika Rg';  
    transition: all 0; 
    -moz-transition: all 0; /* Firefox 4 */ 
    -webkit-transition: all 0; /* Safari and Chrome */ 
    -o-transition: all 0; /* Opera */ 
} 
#header #menu li ul{ 
    margin-top: 6px; 
    width: 500px; 
} 
#header #menu li:hover ul{ 
    visibility: visible; 
}

来源

2012-11-04 user1797660

那么你所要做的就是改变FLOOT到标题的内容：

#header #menu ul li{ 
    position: relative; 
    float: right; <------- Here 
    margin-top: 0; 
    padding: 6px 10px 1px 10px; 
    margin-left: -1px; <------- change this to -1px for prefection. (: 
}

来源

2012-11-04 08:00:08

的最佳方式为了解决这个问题以及跨浏览器验证可能遇到的类似问题，请在您的p中使用reset stylesheet rojects。默认情况下，默认情况下，所有浏览器的所有边距，填充等默认为0，并消除大多数不一致。

要使用重置样式表，只需单击我提供的链接，将css从站点复制并粘贴到notepad.txt文件中，并将其另存为reset.css。将文件放在项目文件夹中，并像其他任何.css文件一样链接到它（假设您使用最佳做法）。

<head> 
    <link rel="stylesheet" type="text/css" href="reset.css"> 
</head>

注：的reset.css确实设置一切违约，所以一定要经过它，并删除任何你不想设置为0或无。

来源

2012-11-04 08:21:07

CSS定位，菜单列表对齐（需要帮助）

回答

相关问题