当您在 Safari、Chrome 和 Opera 中缩小时，我无法找出标题的右侧部分位于左侧部分下方的原因。
这是 demo标题。
如果您在 safari、chrome 或 opera 中打开演示，您会看到标题的右侧部分位于标题左侧部分的下方。
当你在不同的浏览器中缩小时，我想让标题保持在一行。
这是我的代码。
HTML:
<body class="body">
<div id="white-background">
<div class='top-head'>
<div class='left'>
<a class="logo"></a>
<div id="search">
<form id="searchbox">
<input type="text" id="search-bar" required placeholder="What are you looking for?">
<input type="submit" id="submit" value="Search">
</form> <!-- end of form id -->
</div> <!-- end of search id -->
</div> <!-- end of left class -->
<div class='right'>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="create-account">Create Account</a>
<div class="language-wrapper">
<a class="language-icon" href="#" alt="choose-your-language">Language
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
<a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
</div> <!-- end of right class -->
</div> <!-- end of top-head -->
</div><!-- end of white-background class -->
</div> <!-- end of body class -->
CSS:
#white-background {
width: 1024px;
height: 1400px;
background: white;
position: relative;
z-index: 0;
margin: 0 auto 30px auto;
}
.top-head{ height: 45px; }
.left{ padding-left: 15px; padding-top: 14px; float:left; }
.right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }
.logo {
background:url(http://placehold.it/140x20);
background-position: left top;
background-repeat: no-repeat;
width: 140px;
height: 20px;
display: block;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
#search {
position: relative;
margin-left: 150px;
bottom: 25px;
}
#search-bar {
display: inline-block;
box-shadow: 0px 1px 0px #f2f2f2;
background: #fff;
border: 1px solid #d3d3d3;
height: 26px;
padding-right: 80px;
padding-left: 5px;
color: #202020;
font-size: 12px;
font-family: 'Open Sans', Verdana, Arial;
}
#search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
#search-bar:active { border: 1px solid #d13030; }
#submit {
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8;
border: 1px solid #d3d3d3;
width: 80px;
height: 26px;
font-size: 12px;
font-weight: bold;
font-family: 'Open Sans', Verdana, Arial;
color: #656565;
}
#submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
#submit:active { background: #dcdcdc; color: #242424; }
.login {
font-weight: bold;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
box-shadow: 0px 1px 0px #f2f2f2;
text-decoration: none;
background: #f8f8f8;
}
.login:hover {
background: #f4f4f4;
box-shadow: 0px 1px 0px #e5e5e5;
}
.create-account {
font-weight: bold;
border: 1px solid #d13030;
color: #fff;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
background: #d13030 ;
}
.create-account:hover {
background: #c42d2d;
box-shadow: 0px 1px 0px #e5e5e5;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #202020;
}
.language-icon:hover .arrow-down:hover {
border-top: 5px solid #d13030;
}
.language-icon:hover .arrow-up {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.language-wrapper:hover .language-dropdown {
opacity: 1;
display: block;
}
.language-wrapper {
display: inline-block;
}
.language-icon {
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
position: relative;
left: 0; top: 0;
}
.language-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.delivery-country-icon {
position: relative;
left: 0; top: 0;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
}
.delivery-country-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
最佳答案
您可以通过为子元素(输入等)设置固定宽度来解决此问题。
但为什么要缩放到 25%？
关于html - 将标题中的文本和图标保持在一行中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22456409/