將CSS菜單移至屏幕右側？

我正在尋找重新定位這個下拉菜單，以便它位於標題的右側，而不是其正下方的當前位置。我無法在css中找到將代碼綁定到屏幕左側的代碼？將CSS菜單移至屏幕右側？

指數：

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

<title>Baking</title> 
</head> 
<body> 

<h1>I want to bake </h1> 

<nav id="primary_nav_wrap"> 
<ul> 
    <li><a href="#">...</a> 
    <ul> 
    <li><a href="#">Bread</a></li> 
    <li><a href='#'>Brownies</a></li> 
    <li><a href='#'>Cake</a></li> 
    <li><a href='#'>ETC</a></li> 
    </li> 
</ul> 
</nav> 
</body> 
</html>

樣式表：

body 
{ 
    background-color: #1F2E2E; 
} 
h1 
{ 
    color: #EEEEEE; 
    font-family: "ADAM.CG PRO"; 
    font-size: 60px; 
    margin-left: 40px; 
} 

#primary_nav_wrap 
{ 
    margin-top:15px 
} 

#primary_nav_wrap ul 
{ 
    list-style:none; 
    position:right; 
    float:left; 
    margin:0; 
    padding:0 
} 

#primary_nav_wrap ul a 
{ 
    display:block; 
    color:#EEEEEE; 
    text-decoration:none; 
    font-weight:700; 
    font-size:55px; 
    line-height:32px; 
    padding:0 15px; 
    font-family:"ADAM.CG PRO"; 
} 

#primary_nav_wrap ul li 
{ 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

#primary_nav_wrap ul li.current-menu-item 
{ 
    background:#ddd 
} 

#primary_nav_wrap ul li:hover 
{ 
    background:#354343 
} 

#primary_nav_wrap ul ul 
{ 
    display:none; 
    position:absolute; 
    top:0%; 
    left:0; 
    background:#1F2E2E; 
    padding:0 
} 

#primary_nav_wrap ul ul li 
{ 
    float:none; 
    width:450px 
} 

#primary_nav_wrap ul ul a 
{ 
    line-height:120%; 
    padding:10px 15px 
} 

#primary_nav_wrap ul li:hover > ul 
{ 
    display:block 
}

任何幫助將不勝感激！

來源

2015-10-02 user3027864

什麼是位置：對嗎？刪除此字符串並更改您的浮點數：左浮動：右 – Anon

默認情況下不會有代碼將事物左對齊。因爲這是默認瀏覽器行爲。 – Lee

試試這個片斷：

body 
 
{ 
 
    background-color: #1F2E2E; 
 
} 
 
h1 
 
{ 
 
    color: #EEEEEE; 
 
    font-family: "ADAM.CG PRO"; 
 
    font-size: 50px; 
 
    margin-left: 40px; 
 
} 
 

 
#primary_nav_wrap 
 
{ 
 
    margin-top:15px 
 
} 
 

 
#primary_nav_wrap ul 
 
{ 
 
    list-style:none; 
 
    float:right; /* changed to right */ 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
    display:block; 
 
    color:#EEEEEE; 
 
    text-decoration:none; 
 
    font-weight:700; 
 
    font-size:55px; 
 
    line-height:32px; 
 
    padding:0 15px; 
 
    font-family:"ADAM.CG PRO"; 
 
}

<nav id="primary_nav_wrap"> 
 
<ul> 
 
    <li><a href="#">...</a> 
 
    <ul> 
 
    <li><a href="#">Bread</a></li> 
 
    <li><a href='#'>Brownies</a></li> 
 
    <li><a href='#'>Cake</a></li> 
 
    <li><a href='#'>ETC</a></li> 
 
    </li> 
 
</ul> 
 
</nav>

您已設置float: left而不是right您#primary_nav_wrap ul

來源

2015-10-02 13:17:03 Chris

謝謝大家的幫助，它仍然需要很多調整，但我可以在這方面努力！ – user3027864

是的。不用謝 – Chris

在您的#primary_nav_wrap CSS中將float:left更改爲float:right。

左側或右側的浮動元素將對齊它們，並脫離顯示爲塊元素。

但是，默認情況下，關於您的問題..默認情況下，除非另行指定，否則所有HTML項目都是左對齊的。

來源

2015-10-02 13:10:31 Lee

你可以試試這個：

body 
{ 
    background-color: #1F2E2E; 
} 
h1 
{ 
    color: #EEEEEE; 
    font-family: "ADAM.CG PRO"; 
    font-size: 60px; 
    margin-left: 40px; 
} 

#primary_nav_wrap 
{ 
    margin-top:15px 

} 

#primary_nav_wrap ul 
{ 
    list-style:none; 



    margin-top:-100px; 

} 

#primary_nav_wrap ul a 
{ 
    display:block; 
    color:#EEEEEE; 
    text-decoration:none; 
    font-weight:700; 
    font-size:55px; 
    line-height:32px; 
    padding:0 15px; 
    font-family:"ADAM.CG PRO"; 
} 

#primary_nav_wrap ul li 
{ 
    position:relative; 
    float:right; 

} 

#primary_nav_wrap ul li.current-menu-item 
{ 
    background:#ddd 
} 

#primary_nav_wrap ul li:hover 
{ 
    background:#354343 
} 

#primary_nav_wrap ul ul 
{ 
    display:none; 
    position:absolute; 
    top:0%; 
    left:0; 
    background:#1F2E2E; 
    padding:0 
} 

#primary_nav_wrap ul ul li 
{ 
    float:none; 
    width:450px 
} 

#primary_nav_wrap ul ul a 
{ 
    line-height:120%; 
    padding:10px 15px 
} 

#primary_nav_wrap ul li:hover > ul 
{ 
    display:block 
}

DEMO PAGE

來源

2015-10-02 13:18:21

如果你想讓你的標題在網頁右側，菜單在網頁右側，你可以使用float。

如果你想讓你的菜單在你的標題旁邊，你應該讓它們都是display: inline-block;，這樣它們就可以在行中。

工作示例：http://jsfiddle.net/n4L2t3gr/

來源

2015-10-02 13:52:47 HoBi