Question

我希望重新定位此下拉菜单，使其位于标题的右侧，而不是直接位于其下方的当前位置。我无法在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
}

任何帮助将不胜感激！

Answer 1

试试这个代码段：

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

您已将float: left改为right至#primary_nav_wrap ul

Answer 2

将/var/www/foo CSS中的float:left更改为float:right。

向左或向右浮动元素将对齐它们，并且不会显示为块元素。

但默认情况下，关于您的问题..默认情况下，所有HTML项目都保持对齐，除非另有说明。

Answer 3

你可以尝试这个：

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

Answer 4

如果您想在左侧拥有标题，在网页右侧显示菜单，则可以使用浮动。

如果你想让你的标题旁边有你的菜单，你应该同时将它们display: inline-block;放在一起，这样它们就会排成一行。

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

将CSS菜单移到屏幕右侧？

4 个答案: