将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