Html 如何在css中将元素保持在一行中
我试图将标题中的元素保持在一行中。我当前的样式正常工作,但有一个问题是,当我将浏览器缩小或压缩(从右到左)时,搜索元素会在某一点转到第二行或出现在第一行(即菜单行)的下方。当我把它做得更小的时候,整个菜单div标签就会转到第二行,并出现在logo下面 我想要的是,当我把浏览器变小时,所有这些元素应该保持在同一行中。我该怎么做 这是我的密码Html 如何在css中将元素保持在一行中,html,css,haml,sass,Html,Css,Haml,Sass,我试图将标题中的元素保持在一行中。我当前的样式正常工作,但有一个问题是,当我将浏览器缩小或压缩(从右到左)时,搜索元素会在某一点转到第二行或出现在第一行(即菜单行)的下方。当我把它做得更小的时候,整个菜单div标签就会转到第二行,并出现在logo下面 我想要的是,当我把浏览器变小时,所有这些元素应该保持在同一行中。我该怎么做 这是我的密码 .header .logo .menu %ul %li %a{:href => '#', :rel =&
.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%;
}
}
}
}
您有两个选择:
主体上设置最小宽度
我会选择前者,因为后者有点过时。在
body
标签上应用最小宽度,并检查hope,以解决此问题
body
{
min-width:1000px;
}
我已经在.菜单上使用最小宽度。但它不起作用。还有其他解决办法吗?