资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/入门display:inline-block运用

入门display:inline-block运用

lookSomeone / 3008人阅读

摘要：这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。

这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。我是一个小白，学习的路还很长很长，学习了10天HTML与css，应了一句话，所有浪费的日子都是要还的!
言归正传下面总结下这段时间学习出现的问题和学习感想

第一个问题我要在上面添加一个logo和一个搜索框,搜索框里有个搜索的小图标

</>复制代码 
  2.             image
  3.             
  4.             
  5.             f
  6.             
  7.             
  9. #logo{                  
  10.     margin-top: -10px;
  11.     margin-left: 60px;   
  12. }

我发现，logo和搜索框不能对齐，当时我用float margin等命令调试，都不出效果，经过几经周折，最后用到了display:inline-block;和vertical-align:middle;实习。还有那搜索框外的小图标就是不进入里面，我就在想怎样移动，可是怎么都移动不了，后来哥哥告诉我把搜索框的border去掉在外面套一个边框，才实现了这个问题。

</>复制代码 
  1. #logo > * {
  2.     display: inline-block;
  3.     vertical-align: middle;
  4. } 
  5. #logo > p > * {
  6.     display: inline-block;
  7.     vertical-align: middle;
  8.     border: none;
  9. }
  10. #logo p {              
  11.     border: 1px solid rgb(219, 92, 19);
  12.     margin-left: 50px;
  13. }
  14. #logo  p a{
  15.     text-decoration: none; 
  16. }

第二个问题
我就是想让边框和下面的搜索框对齐第一想到的是让下面的边框变短，后来发现这样是不成立的，接下来想到的是让怎么个DIV框变小，可是我想到了让他变小我后面的是不是就变大了不能成立我就没试，最后我改变了他的大小，用margin-left命令调成想要的效果。
这是原来的代码,

</>复制代码 
  2.                     
  3.                         账户登录
  4.                         账户注册
  5.                     
  6.                   
    showImg("https://segmentfault.com/img/bV0Rpw?w=372&h=350");
  7. 改变了#zhdl中width：45%,margin-left:26px;得到了想要的效果,不过后面的账户注册
    width也是需要修改的.
  8. 还有个特别低级的错误在这里我必须强调下自己，在其他登录的后面，那些图片用到的是backgroud-position命令，插入后面背景图图片的时候，路径写错了，并且没有想到是这个问题！！！！！
    我要反思的是我的解题的思路，很重要，出现了一个问题我应该怎样去解决，而不是没有头绪，以后学习中还会有很多问题，不可能别人都会告诉你，我一点要锻炼自己的解决问题的能力与思路，以后的路还很长，学的问题很多，我这可以说才是开始，或者说开始都不算，不过也有点进步，给自己加油！
    Winner takes all
               
  9.                
  10.                                            
  11.                        
  12.                  
  13.             
  14.                      
  15.                  
  16.                                                                                                                     
  17.                          GPU云服务器
  18.                                              
  19.                          云服务器
  20.                                                                                                                                                  
  21.                                       
  22.                      
  23.                     
  24.                                                                                                高级运用
  25.                                                                                                            Ajax运用
  26.                                                                                                            运用Windows
  27.                                                                                                            负载均衡运用
  28.                                                          
  29.                  
  30.                
  31.               
  32.              
  33.                
  34.                    
     文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
  35.                  
  36.                    
    转载请注明本文地址：https://www.ucloud.cn/yun/51628.html
  37.                
  38.                       
  39.                
  40.               
  41.               
  42.                 
    相关文章
  43.                 
    •                              
    •                                                                                                     
    •                                                 
    •                           
      入门display:inline-block运用
    •                                                      
      摘要：这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。
    • 这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。我是一个小白，学习的路还很长很长，学习了10天HTML与css，应了一句话，所有浪费的日子都是要还的!言归正传下面...
    •                                                    
    •                           
    •                                 
    •                                     edagarli
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      2016百度前端技术学院Task02
    •                                                      
      摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。
    • Task02的演示DEMO：https://amnova.github.io/New-...
    • 整个项目的GitHub地址：https://github.com/amn...
    •                                                    
    •                           
    •                                 
    •                                     venmos
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      2016百度前端技术学院Task02
    •                                                      
      摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。
    • Task02的演示DEMO：https://amnova.github.io/New-...
    • 整个项目的GitHub地址：https://github.com/amn...
    •                                                    
    •                           
    •                                 
    •                                     lolomaco
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      没有flexbox弹性盒子，但我们还有table
    •                                                      
      摘要：结构左基线向左移动右基线向右移动一定要使用属性自己不熟悉的自行主要是为了好设置宽度都是相对于父元素的即将父元素平均分成了等份。
    • 由于项目要兼容到IE9，因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+，里面有一些比较好的栅格布局，垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法，总结如下：
    • gi...
    •                                                    
    •                           
    •                                 
    •                                     KunMinX
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      水平垂直居中
    •                                                      
      摘要：它为什么备受关注并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。多行块级元素实现原理同水平居中的水平垂直居中综合运用水平垂直居中即可。
    • 它为什么备受关注？
    • 并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。
    • 将各个问题分类，给出常用解
    • 水平居中
    • 行内元素：
    • text-align:center
    • html:
    •    text-align:cent...
    •                                                    
    •                           
    •                                 
    •                                     MingjunYang
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                            
    •                 
  44.               
  45.               
  46.                
  47.                   
  48.                   
    发表评论
  49.                    
  50.                                       
  51.                       
  52.                         登陆后可评论
  53.                                          
  54.                
  55.               
  56.                 
  57.                   
    0条评论
       
  58.                  
  59.                       
  60.               
  61.

lookSomeone

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<