input button select是块状元素行内元素还是inline-block元素啊？

input button select是块状元素行内元素还是inline-block元素啊？

解决方案 »

  1.   

    他是inline-block元素。可以写个测试页测试一下：
    http://jsbin.com/iwehej/1/
    <!DOCTYPE HTML>
    <html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style type="text/css">
            *{ margin:0; padding:0;}
            body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}
            table{border-collapse:collapse;border-spacing:0;}
            li{list-style:none;}
            fieldset,img{border:0;}
            article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
            q:before,q:after{content:'';}
            a:focus,input,textarea{outline-style:none;}
            input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
            textarea{resize:none}
            address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}
            legend{color:#000;}
            abbr,acronym{border:0;font-variant:normal;}
            a{color:#0a8cd2;text-decoration:none;}
            a:hover{text-decoration:underline;}
            .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
            .clearfix{display:inline-block;}
            .clearfix{display:block;}
            .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
            .none{display:none}
            .input1{ margin:50px;}
            .btn1{ width:130px; height:30px;border-radius:5px;}
        </style>
    </head>
    <body>
    <input class="input1" type="text"/>
    <button class="btn1">测试button</button>
    </body>
    </html>
      

  2.   

    inline:意思是可以与其他元素排成一排
    block:意思是它可以设置高宽
    如果符合两个条件就是inline-block，你用CSS设置一下看看情况就明白
      

  3.   

    那么inline-block应具备这两个优点了，在做导航条时把元素变成inline-block好呢还是用浮动好，哪个兼容性好啊？
      

  4.   

    肯定浮动好，inline-blockie6下有问题，如果不考虑ie6的话就用inline-block