我有一个WordPress网站，其中菜单浮动在标题中的徽标右侧。徽标占据宽度的25％左右，剩余的75％占据7个菜单选项。如果添加了第8个菜单选项，它将超出可用空间，整个菜单基本上会在徽标下方向下移动。我相信很多人都熟悉这种菜单响应。
如果菜单位于徽标下方，我希望能够实现一组新的样式。换句话说，这不是基于浏览器大小，而是基于客户端最终可能添加到网站的菜单数量。有没有人知道实现这个的正确语法或方法？
提前致谢！
答案 0 :(得分：1)
去年4月，他们发布了更新版本的flex属性，这适用于大多数浏览器，直至IE10。这就像显示内联块一样，但它会插入宽度，并为任何响应内联元素提供更高的灵活性
以下是其功能的完整描述。 http://css-tricks.com/snippets/css/a-guide-to-flexbox/
看看这个小提琴
基本上你会将这些显示属性放在你希望看到内嵌显示的内容的父级上。
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: -moz-box; /* MOZILLA */
display: flex; /* standard syntax */
答案 1 :(得分：0)
我打赌你有类似的东西
LOGOMenu
向左浮动
你可以尝试吗？#logo{
width:40%;
background:green;
height:20px;
float:left;
}
#menu{
min-width:60%;
background:blue;
height:20px;
display:inline-block;
}
查看结果......
答案 2 :(得分：0)
使用之前的小提琴示例，我添加了一小段代码来解决您的问题！
在发布CSS3时，可以使用响应式网页设计的一把钥匙。这就是所谓的媒体查询。
@media all and (max-width: 699px){
/* Put any styles here */
}
http://www.w3schools.com/css/css_mediatypes.asp
这意味着当屏幕尺寸低于699px时，它将在约束条件下执行任何样式。
在响应式设计中，为文档添加“视口标记”非常重要。这允许浏览器读取用户IE：平板电脑和智能手机的设备宽度：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
您还可以在2像素宽度之间设置样式：
@media all and (max-width: 699px) and (min-width: 500px){
/* Put any styles here */
}