入门display:inline-block运用

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

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

<div id="logo">
            <img src="image/logo.PNG" alt="image" title="xinlanglogo">
            <p>
            <input type="text" name="fullname">
            <a href="#" class="YourWebFontName">f</a>
            </p>
            
</div>
#logo{                  
    margin-top: -10px;
    margin-left: 60px;   
}

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

#logo > * {
    display: inline-block;
    vertical-align: middle;
} 
#logo > p > * {
    display: inline-block;
    vertical-align: middle;
    border: none;
}
#logo p {              
    border: 1px solid rgb(219, 92, 19);
    margin-left: 50px;
}
#logo  p a{
    text-decoration: none; 
}

图片描述

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

<div id="denglv">
                    <p>
                        <a id="zhdl"><b>账户登录</b></a>
                        <a  id="zhzc">账户注册</a>
                    </p>
                  <div class="denglvkuang>
#denglv {              
    background:#fff;
    width:400px;
    height: 380px;
    border: 20px solid #f2f2f5;
}
#zhdl {             
    width: 50%;
    float: left;
    padding-bottom: 10px;
    border-bottom: 2px solid #ff8140;
    text-align: center;
}

#zhzc {               
    width:50%;
    float: right;
    text-align: center;
}

图片描述

改变了#zhdl中width：45%,margin-left:26px;得到了想要的效果,不过后面的账户注册
width也是需要修改的.

还有个特别低级的错误在这里我必须强调下自己，在其他登录的后面，那些图片用到的是backgroud-position命令，插入后面背景图图片的时候，路径写错了，并且没有想到是这个问题！！！！！
我要反思的是我的解题的思路，很重要，出现了一个问题我应该怎样去解决，而不是没有头绪，以后学习中还会有很多问题，不可能别人都会告诉你，我一点要锻炼自己的解决问题的能力与思路，以后的路还很长，学的问题很多，我这可以说才是开始，或者说开始都不算，不过也有点进步，给自己加油！
Winner takes all

猜你喜欢