为什么后面的表单图片和前面的div不在一个水平线上？_html/css

为什么后面的表单图片和前面的div不在一个水平线上？_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-21 09:11:43

original

1443 Les gens l'ont consulté

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>HTML和CSS结合效果实例</title>    <link rel="stylesheet" type="text/css" href="style01.css"></head><body>    <div class="container"><!-- 这里承载所有内容，包括heading，body，footing-->        <div class="wanpper">            <div class="heading">                <div class="heading_nav">                    <div class="heading_title">                        极客学院                    </div>                    <div class="heading_navbar">                        <ul>                            <li><a href="#">首页</a></li>                            <li><a href="#">职业课程</a></li>                            <li><a href="#">技术问答</a></li>                            <li><a href="#">VIP会员</a></li>                        </ul>                    </div>                    <div class="heading_img">                        <img  src="jokul.jpg" alt="为什么后面的表单图片和前面的div不在一个水平线上？_html/css_WEB-ITnose" >                    </div>                    <div class="heading_put">                        <form>                            <input type="text">                        </form>                    </div>                </div>            </div>            <div class="body">                <div class="body_title">                    <h3>熟悉极客学院</h3>                    <p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p>                </div>                <hr/>                <hr/>            </div>        </div>        <div class="footing">            @极客学院        </div>    </div></body></html>

Copier après la connexion

*{     margin: 0px;     padding: 0px; }body{    background-color: snow;}.wanpper{    width: 80%;    height: 1000px;    margin: 0px auto;    background-color: antiquewhite;}.heading{    width: 100%;    height: 90px;    margin: 0px auto;    background-color: snow;}.heading_nav{    /*height: 30px;*/    width: 100%;    height: auto;    padding-top: 30px;    padding-bottom: 30px;    position: relative;}.heading_title{    float: left;    color: bisque;    font-weight: bold;    font-size: 30px;    font-family: sans-serif;}.heading_navbar ul{    list-style-type: none;    margin-left: 150px;    padding-top: 8px;    padding-bottom: 8px;}.heading_navbar li{    font-family: sans-serif;    display: inline;    padding-left: 20px;    font-weight: bold;}.heading_navbar a:link,a:visited{    color: darkgrey;    text-decoration: none;}.heading_navbar a:hover,a:active{    color: dimgrey;}.heading_img img{    border-radius: 30px;    height: 26px;    width: 26px;    float: right;    box-shadow: 0 1px 1px rgba(0,0,0,0.2);    display: inline;}.heading_put form{    position: relative;    margin-right: 20px;    float: right;}.heading_put form input{    height: 20px;    width: 100px;    border-radius: 30px;}.body{    width: auto;    height: auto;    padding: 30px;}.body_title h3{    font-family: sans-serif;    font-size: 30px;    font-weight: bold;    color: black;}.body_title p{    font-family: sans-serif;    font-size: 15px;    margin-top: 20px;    margin-bottom: 20px;}.footing{    height: 30px;    text-align: center;    margin-top: 6px;    color: darkgray;}

Copier après la connexion