实现去哪网中的搜索框布局布局

Posted 2020-11-21 lanyb009

（1）先放出相应的代码，即：

 1 <template>
 2   <div class="search">
 3     <input class="search-input" type="text" placeholder="请输入..." />
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: ‘hhh‘,
10   data () {
11     return {
12       value: ‘‘
13     }
14   }
15 }
16 </script>
17 
18 <style lang="stylus" scoped>
19   .search
20     background: #cccccc
21     height: 3rem
22     position: relative
23     .search-input
24       position: absolute
25       box-sizing: border-box
26       height: 1.5rem
27       line-height: 1.5rem
28       width: 100%
29       text-align: center //实现文字左右居中显示
30       border-radius: .36rem //出现圆角
31       padding: 0 .3rem
32       left: 0
33       top: 0
34       bottom: 0
35       right: 0
36       margin: auto
37 </style>

（2）将父元素设置为relative，子元素设置为absolute，同时让子元素的top、left等设置为0，最后将margin设置为auto，即可实现父元素方框中的input框上下对齐。

（3）将height和line-height设置为一样高，可以实现里面的文字上下对齐；

（4）同时设置box-sizing和padding可以实现input框中文字满了的时候不会溢出到边框

以下是效果图：