無法將菜單項對齊到右側

我在嘗試將菜單項對齊到右側，但它不起作用。我認爲這是因爲我使用了float：left來以正確的順序水平顯示菜單。我無法解決這個問題，所以我尋求幫助。無法將菜單項對齊到右側

我的問題的演示可以在http://elexode.nl

發現這是我的CSS：

/* RESET */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/* OWN CONTENT */ 

body { 
    background:url('bg.jpg') fixed no-repeat; 
    font-family:Tahoma, Geneva, sans-serif; 
} 

#padding-inline { 
    padding:10px 0; 
} 

.container { 
    background:white; 
} 

.nav-menu { 
    height:47px; 
} 

.nav-menu ul { 
    line-height:47px; 
    float:left; 
    list-style-type:none; 
} 

.nav-menu li { 
    display:inline; 
} 

.nav-menu ul li a { 
    float:left; 
    text-decoration:none; 
    color:#5C5C5C; 
    padding:0 5px; 
} 

.nav-menu ul li a:hover { 
    color:#000000; 
}

來源

2014-01-18 Julian

請顯示您的HTML代碼。 – Roopendra

變化浮動到右

nav-menu a { 
    color: rgb(51, 51, 51); 
    text-decoration: none; 
    padding: 0px 5px; 
    float: right; 
}

，並更改鏈接的順序：

<ul> 
    <li><a href='index.html'>VIDEOS</a></li> 
    <li><a href='index.html'>MUSIC</a></li> 
    <li><a href='index.html'>BIO</a></li> 
    <li><a href='index.html'>HOME</a></li> 
</ul>

，你沒有關閉錨標籤...你應該關閉它。

由於您剛開始創建網站，我建議您嘗試使用一些CSS框架，如Foudation 5 http://foundation.zurb.com。

它可以幫助您輕鬆創建響應式網站。它支持多種導航風格。檢查文檔http://foundation.zurb.com/docs/

來源

2014-01-18 13:05:10 Kamal

非常有用，但如果我在Wordpress主題上使用此主題，那麼我如何更改菜單的順序呢？ – Julian

我不明白你的問題。「這個主題」指的是哪個主題？ – Kamal

我檢查了鏈接，看起來像你的html壞了：爲什麼在每個<li>之後有<a>？

<ul> 
    <li><a href="index.html"> 
      HOME</a> 
    </li> 
     <a href="index.html"> </a> 
    <li><a href="index.html"></a><a href="index.html">BIO</a></li><a href="index.html"> 
        </a><li><a href="index.html"></a><a href="index.html">MUSIC</a></li><a href="index.html"> 
        </a><li><a href="index.html"></a><a href="index.html">VIDEOS</a></li><a href="index.html"> 
       </a></ul>

來源

2014-01-18 13:05:47

我猜你只是想將HOME MUSIC BIO VIDEOS向右移動？

我只是給ul添加了邊距。

.nav-menu { 
    height: 47px; 
    margin-left: 80px; 
}

但我不確定這就是您要找的。

來源

2014-01-18 13:09:17 TimSPQR

我不想改變它。我想把它對齊 – Julian

無法將菜單項對齊到右側

回答

相關問題