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

我试图在调整菜单大小时使“菜单”中的“项目”链接停留在“ 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;
}

最佳答案

希望这是您要寻找的：
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响应。

关于css - CSS-尝试在调整浏览器大小时将链接保留在顶部导航中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23228362/