问当我缩小时，菜单宽度会缩小。
EN

Stack Overflow用户

提问于 2015-04-13 17:54:23

回答 1查看 72关注 0票数 0

当浏览器没有调整大小时，我能够正确地对齐菜单栏。一旦我开始放大，菜单栏中的内容就会出现在下面，我现在集中精力放大菜单。

请告诉我什么一定是问题，有什么办法，我可以防止菜单项包装。

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

链接

html

css

回答 1

Stack Overflow用户

发布于 2015-04-13 18:02:34

它在响应式布局中不工作。因此，解决方案是使用@media查询或使用引导网格布局，其中您可以将标题作为一行，并给出大小为4的3列，即“col-md-4”，这将使代码保持不变，并调整窗口的大小。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29611844

复制

相似问题

问当我缩小时，菜单宽度会缩小。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我缩小时，菜单宽度会缩小。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我缩小时，菜单宽度会缩小。
EN