我试图将标题中的元素保持在一行中。我当前的样式有效，但一个问题是，当我将浏览器缩小或挤压（从右到左）时，搜索元素有时会转到第二行或出现在第一行下方（即菜单行）。当我让它更小时，整个菜单 div 标签会转到第二行并出现在徽标下方。
我想要的是当我让我的浏览器更小时，所有这些元素都应该保持在同一行中。我怎样才能做到这一点？
这是我的代码
.header
.logo
.menu
%ul
%li
%a{:href => '#', :rel => 'first'} Home
%li
%a{:href => '#', :rel => 'first'} Features
%li
%a{:href => '#', :rel => 'first'} Pricing
%li
%a{:href => '#', :rel => 'first'} Team
%li
%a{:href => '#', :rel => 'first'} Support
%a{:href => '#', :rel => 'first'}
%li.last Sign up for beta
.clear
.search
%input{:type => 'text', :name => 'search'}
.clear
这是scss
.header-container {
width: 100%;
height: 100px;
}
.clear { clear: both; }
.header-container {
width: 100%;
background: url(menu-bg.jpg) no-repeat;
background-size: 100%;
.header {
padding: 30px 100px;
width: 68%;
margin: 0 auto;
.logo {
width: 122px; height: 31px;
margin-right: 10px;
float: left;
background: url(logo.png) no-repeat;
}
.menu {
min-width: 500px;
float: left;
ul {
line-height: 5px;
list-style-type: none;
li {
float: left;
margin-right: 25px;
a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
a:hover {
background: url(selected.jpg) no-repeat;
}
&.last {
color: #ffffff;
width: 148px; height: 38px;
margin-top: -16px;
padding: 16px 18px;
background: url(buttonbg.jpg) no-repeat;
}
}
}
}
.search {
input {
width: 200px;
float: right;
padding: 5px;
color: #ffffff;
background-color: #2c3338;
border: 1px solid #2c3338;
background: url(search.png) no-repeat 98%;
}
}
}
}