Question

我可以在未调整浏览器大小时正确对齐菜单栏。一旦我开始缩小，菜单栏中的内容如下所示，我目前专注于缩小菜单。

请告诉我一定是什么问题，有什么方法可以保持菜单项不被包装。

<body>

    <div id="wrapper">
    <div id="header"> 

        <div id="logo">CodePlayer </div>  
        <div id="run_btn">  <button id="run"> Run </button> </div> 

        <ul id="menu"> 
            <li> HTML </li>
            <li> CSS </li>
            <li> JS </li>
            <li> Result </li>
        </ul>


        <div class="clear"> </div>
    </div>
    </div>
</body>

CSS

body {
    padding: 0;
    margin: 0;
}
#wrapper {
    width: 100%;
}
#header {
    width: 100%;
    background-color: #EDEDED;
    height: 40px;
}
#header #logo {
    font-weight: bold;
    font-family: Helvetica;
    font-size: 0.9em;
    padding: 10px 10px;
    float: left;
}
#header #menu {
    width: 220px;
    margin: 0 auto;
    border: 1px solid grey;
    border-radius: 3px;
    height: 27px;
    position: relative;
    top: 5px;
    padding-left: 0px;
    padding-right: 0px;
}
#header ul li {
    float: left;
    list-style-type: none;
    padding: 5px 10px;
    border-right: 1px solid grey;
    font-size: 1em;
}
#header ul li:last-child {
    border-right: none;
}
#run_btn {
    float: right;
    padding: 5px 10px 0 0;
}
#run_btn #run {
    font-size: 120%;
}
.clear {
    clear: both
}

link

Answer 1

它在响应式布局中不起作用。因此，解决方案将使用@ media-queries或者您可以使用引导网格布局，其中您可以将标题作为一行放置并给出3列大小为4，即col-md-4＆＃39 ;，这将保持代码完整，窗口调整大小。

缩小时菜单宽度缩小

1 个答案: