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

nbsp;html>        HTML和CSS结合效果实例        
        
            
                
                    
                        极客学院                    
                    
                        
                                
  • 首页
  •                             
  • 职业课程
  •                             
  • 技术问答
  •                             
  • VIP会员
  •                         
                    
                    
                        @@##@@                    
                    
                                                                                                
                
            
            
                
                    

熟悉极客学院

                    

加入极客学院,学习最新实战教程,全面提升你的技术能力

                
                
                
            
        
        
            @极客学院        
    

登录后复制

*{     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,拖出文档流绝对定位。

好好学基础。。。

                        
                    

这个换下位置
 

                        
                    

                        极客学院
                    

写成这样 试试看 为什么后面的表单图片和前面的div不在一个水平线上?_html/css_WEB-ITnose

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3113975.html

(0)
上一篇 2025年3月29日 12:10:59
下一篇 2025年3月29日 12:11:05

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论