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定位，菜單列表對齊（需要幫助）

回答

相關問題