ヘッダーの要素を 1 行に保持しようとしています。現在のスタイルは機能していますが、ブラウザを小さくしたり(右から左に)絞ったりすると、ある時点で検索要素が2行目に移動するか、最初の行(メニュー行)の下に表示されるという問題があります。さらに小さくすると、メニュー div タグ全体が 2 行目に移動し、ロゴの下に表示されます。
私が望むのは、ブラウザを小さくしたときに、これらすべての要素が同じ行に残るようにすることです。これどうやってするの?
これが私のコードです
.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%;
}
}
}
}