Home > Article > Web Front-end > 为什么后面的表单图片和前面的div不在一个水平线上？_html/css_WEB-ITnose
为什么后面的表单图片和前面的div不在一个水平线上？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:11:431422browse
<!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>
*{ 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;}
回复讨论(解决方案)
用firebug或者Chrome的开发者工具看一下，是不是导航条的li宽度太宽了，后面的图片和输入框放不下了。
一般某些元素太宽，右边的宽度无法放下div时，这个div就会换行显示。
其实你也可以把div的position属性设置成absolute，拖出文档流绝对定位。
好好学基础。。。
这个换下位置
极客学院
写成这样 试试看
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：雪碧图工具css-sprite指南_html/css_WEB-ITnoseNext article：PurifyCSS：清除单页应用中没有使用的 CSS_html/css_WEB-ITnose