Question

我正在设计一个菜单＆amp;子菜单

我面临着子菜单对齐的问题

menu

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

如果我使用正确：-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;
}

Answer 1

你需要做的就是将地板改为标题：

#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. (:
}

Answer 2

解决此问题以及跨浏览器验证可能遇到的类似问题的最佳方法是在项目中使用reset stylesheet。默认情况下，默认情况下，所有浏览器的所有边距，填充等都默认为0，并消除了大多数不一致性。

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

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

注意： reset.css会将所有内容设置为默认值，因此请务必仔细检查并删除您不想设置为0或无的内容。

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

2 个答案: