首页 > 为什么input会变大占满整行,而且不能垂直居中?

为什么input会变大占满整行,而且不能垂直居中?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css"
            rel="stylesheet">
    <style>
     .row{
        overflow:hidden;
        height:40px;  
        margin-left:20px;
        margin-top:20px;
        border:1px solid red;
        width:1000px;
        line-height:40px;
        vertical-align:top;
    }
    </style>
</head>
<body>
    <form class="row  form-inline">
        <div  class="form-group">
            <span>这是一行</span>
            <input type="text" class=""></div>
        <div class="form-group">
            <span>姓名</span>
            <select name="">

                <option value="请选择" selected="selected">性别</option>
            </select>
            <select id="user_address_building" name="" onchange="findAllUnits()" >
                <option value="1">1</option>
                <option value="请选择" selected="selected">年龄</option>
            </select>
            <select id="" name="" >
                <option value="请选择" selected="selected">地址</option>
            </select>
        </div>
        <div class="form-group">
            <span>联系</span>
            <select id="" name="">
                <option value="请选择" selected="selected">请选择</option>
            </select>
        </div>
        <div class="form-group">
            <span>编号</span>
            <input  type="text" name="">
            <button   type="submit">
                <span class="">按钮</span>
            </button>
        </div>
    </form>
</body>
</html>


建议你把所有网页代码贴出来,你这个片段贴出来都和你截图不一致。


display:inline-block


input,
select { vertical-align: middle; }

.form-group{

text-align:center;

}

【热门文章】
【热门文章】