豎立的搜索框怎么弄呢？
想讓搜索框豎立 ?求幫忙
qq_你可以閉嘴了_04053243
2016-10-19
3 回答
舉報(bào)
0/150
提交
取消
2017-02-19
真大神?。。。?！
2016-10-19
多謝大神 ? ? 明白了
2016-10-19
<html>
<head>
??? <title>bing search</title>
??? <style type="text/css">
??????? body{background-color: #333;}
??????? .bg-div{
??????????? position:relative;
??????????? text-align:center;
??????????? margin: 0 auto;
??????????? height: 690px;
??????????? width: 1228px;
??????????? background-image: url(http://img1.sycdn.imooc.com//52da5e7d0001c0f813660768.jpg);
??????? }
??????? .logo{
??????????? float:left;
??????????? background: url(http://img1.sycdn.imooc.com//52da5e530001eea901070053.jpg) no-repeat;
??????????? margin: -4px 18px 0 0;
??????????? height: 53px;
??????????? width: 107px;
??????? }
??????? .search-warp{
??????????? float:left;
??????????? background-color:#fff;
??????????? width:30px;
??????????? padding:5px;
??????? }
??????? .search-input{
??????????? float:left;
??????????? border: 0;
??????????? font-size: 100%;
??????????? width: 30px;
??????????? outline: none;/**/
??????????? height:229px;
?????????? ?
??????? }
??????? .search-submit{
??????????? float:left;
??????????? cursor:pointer;
??????????? line-height:25px;
??????????? height: 29px;
??????????? width: 29px;
??????????? background: transparent url(http://img1.sycdn.imooc.com//52da5df800012b1e02220137.jpg) no-repeat -30px -107px;
??????????? border: 0;
??????? }
??????? .search-box{
??????????? position:absolute;
??????????? top:20%;
??????????? left:8%;
??????? }
??? </style>
</head>
<body>
??? <div class="bg-div">
??? <div class="search-box">
??????? <div class="logo"></div>
??????? <form action="https://www.bing.com/search" target="_blank" method="get" class="search-warp">
??????????????? <input class="search-input" type="text" name="q">
??????????????? <input class="search-submit" type="submit" value=""/>
??????? </form>
??? </div>
??? </div>
</body>
</html>
把form、input框的width改小，input框height改大