Question

帮助！我是CSS / HTML的新手，我无法理解我做错了什么。

我希望右侧的三个导航链接位于页面顶部，但此时它们位于左侧导航链接的下方。

它们都在div.wrapper范围内，但nav#menu2似乎不是它的一部分？

我哪里错了？

这是HTML：

<header>
    <div class="wrapper">
        <h5 class="logo">TESTER SITE</h5>
        <nav id="nav_menu">
            <ul>
                <li><a href="#">About Us</a>
                    <ul>
                        <li><a href="#">Mission & Background</a></li>
                        <li><a href="#">Objects, Vision & Values</a></li>
                        <li><a href="#">Staff Members</a></li>
                        <li><a href="#">Board Members</a></li>

                    </ul>

                </li>


                <li><a href="#">Our Projects</a></li>
                <li><a href="#">Training & Events</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Publications</a> </li>

            </ul>
        </nav>

        <nav id ="menu2">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Service Providers</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">FB</a></li>
                <li><a href="#">TW</a></li>

            </ul>


        </nav>

    </div>
</header><!--  End Header  -->

这是CSS：

body {
padding:0;
margin:0;
vertical-align:baseline;

}







.feature a,
.cta a.cta_btn,
.testimonials #t_nav#nav_menuigation a,
header ul.social li a,
header nav#nav_menu ul li, header nav#nav_menu ul li ul, header nav#nav_menu ul li ul li a, header nav#nav_menu ul li:hover a {
transition:all .2s linear;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition:all .2s linear;
}



/*  header  */


header{
width: 97%;
background: #e52929;
position:fixed;
z-index: 999;
box-shadow: 0px 0.5px 2px 1px #101010;
padding:0 1.5% 0 1.5%;



}



h5.logo{
float: left;
display:inline-block;
margin-right:2%;
font-size: 1.3rem;
font-family: 'Source Sans Pro', sans-serif; 
font-weight:700;  
text-transform: uppercase;
color:#fff;
margin-top:4px;
margin-bottom: 0;
position:relative;


}


header .menu_icon{
display: block;
width: 35px;
height: 35px;
background: url('../img/menu_icon.png') no-repeat;
float: right;
margin-top: 23px;
display: none;
}




header nav#nav_menu{

width:65%;
position:;

}



header nav#nav_menu ul li {

font-size: 0.9em;
font-family: 'Source Sans Pro', sans-serif; 
font-weight:700;  
text-transform: uppercase;
padding:1% 1%;
margin: 0 auto;
display:inline-block;
text-align:left;
overflow:hidden;
margin-top: 0;


}

header nav#nav_menu ul ul {
position:absolute;
z-index:900;
visibility:hidden;   
background-color: #fff;
width:180px;
overflow:hidden;
margin-left:-8px;

padding:0;

}

header nav#nav_menu ul ul li {
display:block;
margin:0 auto;
width:100%;
z-index: -1;
padding:0;


}

header nav#nav_menu ul ul li a {
display:block;
padding:8% 10% 8% 5%;
margin-left:0;
font-size: 13px;
font-family: 'Source Sans Pro', sans-serif; 
font-weight:700; 
width:100%;
color:#e52929;




}


header nav#nav_menu ul li a {
text-decoration: none;
color: #fff;
}



header nav#nav_menu ul li:hover{
background-color: #fff;
}



header nav#nav_menu ul li:hover a{
color: #e52929;
}


header nav#nav_menu ul li:hover ul{
display:block;
visibility: visible;
}


header nav#nav_menu ul li ul li:hover a {
background-color:#e52929;
color:white;

 }

header nav#menu2 {
position:relative;
float:right;
width:40%;
margin-top: 0;

}

header nav#menu2 ul {
list-style-type: none;
 }

header nav#menu2 ul li {
display: inline-block;
padding: 2%;
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px #101010;

 }

header nav#menu2 ul li:nth-child(4), header nav#menu2 ul li:nth-child(5) {


background-color: #525252;


}


header nav#menu2 ul li a:active, a:visited, a:link {
color:#e52929;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif; 
font-weight:700;  
text-transform: uppercase;

}





/** {
   background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

 */

http://jsfiddle.net/7zeLm1gu/

Answer 1

您可以在菜单中添加一些浮动定位：float:left;

此外，您需要调整header nav#nav_menu和nav#menu2的百分比值。你拥有它的方式，总计最多105%。

因此，您可以使用现有代码执行此操作：

header nav#nav_menu,
header nav#menu2 {
  float:left;
}

header nav#nav_menu {
  width:45%;
}

Example

旁注 - 您最终想要使用CSS Reset。如果查看标题中的列表，您会看到一些默认填充。

Answer 2

看起来您需要正确设置宽度和使用浮动的组合。见this demo

我设置花车：

#nav_menu, #menu2{float:left;}

并将第一个菜单的宽度从65％减少到35％。

HTH， -Ted

Answer 3

请参阅您自己的样式表：

header nav#nav_menu{

width:65%;
position:;

}

position缺少值。你可以删除位置。

然后，在#menu2中手动更改，如下所示：

header nav#menu2 {
float:right;
width:40%;
margin-top:-17px;

}

enter image description here

非常简单 - CSS定位 - 我做错了什么？

3 个答案: