css - 布局被挤到下面的问题。
本文介绍了css - 布局被挤到下面的问题。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
没写a元素时的正常布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*reser-start*/
html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset {
margin: 0;
padding: 0;
}
body, th, td, button, input, select, textarea {
font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "WenQuanYi Micro Hei", "\5B8B\4F53";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
content: "";
display: block;
width: 0;
height: 0;
clear: both;
}
/*head-start*/
.g-hd {
border-bottom: 12px solid #1b5fb1;
}
.g-hd .m-hd-top {
width: 1300px;
height: 70px;
margin: 0 auto;
}
.g-hd .m-hd-top a.fl {
width: 312px;
height: 70px;
margin-left: 155px;
background: url(images/logo_1.png) no-repeat left center;
background-size: 312px 36px;
position: relative;
}
.g-hd .m-hd-top a.fl:before {
content: "";
display: block;
width: 131px;
height: 120px;
background: url(images/logo.png) no-repeat left top;
position: absolute;
left: -150px;
}
.g-hd .m-hd-top form {
display: inline-block;
}
.g-hd .m-hd-top form input {
border-radius: 5px;
border: 1px solid #a2a1a1;
width: 310px;
height: 28px;
padding: 0 15px;
color: #a2a1a1;
margin: 20px 0;
background: url(images/search.png) no-repeat 95% center;
}
.g-hd .m-hd-top a.ch {
display: inline-block;
width: 33px;
height: 70px;
background: url(images/ch.png) no-repeat left center;
}
</style>
</head>
<body>
<div class="g-hd">
<div class="m-hd-top clearfix">
<div class="u-btn fr">
<form action="" method="post">
<input type="text" value="输入需要搜索的内容">
</form>
<a class="ch" href="#"></a>
<a class="ch" href="#"></a>
</div>
</div>
</div>
</body>
</html>添加上a元素的效果
解决方案
display: inline-block;的锅， .g-hd .m-hd-top form加上 vertical-align: top;vertical-align这玩意儿讲起来很麻烦的，能说一大堆给你两个参考链接吧，链接1，链接2
.g-hd .m-hd-top form {
display: inline-block;
vertical-align: top;
}这篇关于css - 布局被挤到下面的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
