CSS - 尝试在浏览器调整大小时将链接保留在顶部导航栏内

Question

我试图让“菜单”中的“元素”链接在调整浏览器大小时保留在“navWrapper”/“navContent”中......但是当我减小浏览器窗口的宽度时他们一直保持在这些 div 之外的右侧......关于如何将它们全部包含在导航区域内的任何想法？

<div id="navWrapper">
    <div id="navContent">
    <div id="logo"><img src="assets/logo.png"></div>
    <div id="menu">
    <div class="item"><a href="">dadada</a></div>
    <div class="item"><a href="">dadada</a></div>
    </div>
</div>


#navWrapper {
    background-color:#3f3f3f;
   margin-left: 20px;
   margin-right: 20px;
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
   border-bottom-right-radius: 30px;
   border-bottom-left-radius: 30px;
   margin-top:0 auto;
}

#navContent {
   width:950px;
   height:65px;
}

#navContent #logo {
   width:200px;
   float:left;
   display:inline;
   margin-left:30px;
   margin-top:15px;
}

#navContent #menu {
   width:466px;
   height:25px;
   float:right;
   display:inline;
   border: 1px solid #ffffff;
   margin-right:30px;
   margin-top:15px;
}

Answer 1

希望这就是您要找的: http://jsfiddle.net/disinfor/7XFsH/

HTML

<div id="navWrapper">
    <div id="navContent">
        <div id="logo">
            <img src="assets/logo.png" />
        </div>
        <!-- #logo -->
        <div id="menu">
            <div class="item"><a href="">dadada</a>
            </div>
            <div class="item"><a href="">dadada</a>
            </div>
        </div>
        <!-- #menu -->
    </div>
    <!-- #navContent -->
</div>
<!-- #navWrapper -->

CSS

#navWrapper {
    background-color:#3f3f3f;
    margin-left: 20px;
    margin-right: 20px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-top:0 auto;
}
#navContent {
    width:100%;
    height:65px;
}
#navContent #logo {
    width:200px;
    float:left;
    display:inline;
    margin-left:30px;
    margin-top:15px;
}
#navContent #menu {
    height:25px;
    float:right;
    display:inline;
    border: 1px solid #ffffff;
    margin-right:30px;
    margin-top:15px;
}
.item {
    float:left;
    position:relative;
    padding-left:10px;
}

.item a {
    color:white;
}

它还使 navContent 响应。