为什么浮动：对不在css3工作？

Question

我需要在右侧显示标签，如图所示。我能够制作标题。但我无法在右侧显示标题标签。我已经使用

了

float: right!important

当我将浏览器宽度更改为600px时，它会将标签更改为下拉列表。这怎么可能？我搜索谷歌，发现有一种方法可以使用媒体查询。我可以添加这个，但如何将正确的标签更改为下拉列表？

这是我的代码

http://codepen.io/anon/pen/GpoaXG

    #menubar li{
        display: inline;
        padding:0.5em;
        font-size:1.5em;
        color :red
    }
    @media screen and (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }
#menubar{
  float:right;
  position:relative;
}

Answer 1

这是因为#menubar在小父元素中。父元素应该设置width:100%或类似的东西。当父元素太小时，就没有浮动的地方了

Answer 2

为您的包裹div提供一个ID（例如menubarCont）并将其添加到您的CSS中：

#menubarCont {
  width: 100%;
  float: right;
}

Working CodePen