javascript - 如何设置css，让中间的input输入框对齐呀？

问题描述

问 题

 <div  class="center">
           <label>门店名称</label>
           <input type="text" name="">
           <span class="blank"></span>
           <label>门店电话</label>
           <input type="text" name="">
   </div>
   <div  class="center">
           <label>联系人</label>
           <input type="text" name="">
           <span class="blank"></span>
           <label>手机号</label>
           <input type="text" name="">
   </div>
   <div  class="center">
           <label>所属区域</label>
           <input type="text" name="">
           <span class="blank"></span>
           <label>门店地址</label>
           <input type="text" name="">
   </div>
这是css

body{padding: 10px 150px;}
label{ font-size: 1.3em;}
input{
            border: 1px solid #ccc;
            border-radius: 2px;
            color: #000;
            font-family: 'Open Sans', sans-serif;
            font-size: 1em;
            height: 40px;
            padding: 0 18px;
            transition: background 0.3s ease-in-out;
            width: 300px;
        }
        input:focus {
            outline: none;
            border-color: #9ecaed;
            box-shadow: 0 0 10px #9ecaed;
        }

/*
class
*/
.center{text-align: center;
        white-space: nowrap;
        margin-top: 20px;
        }

.blank{display: inline-block;width: 20px}

解决方案

1，如果用了bootstrap框架，可以使用栅格化布局；
2，使用flex布局也很容易实现；
3，推荐在你的css代码里直接设置label定宽。

这篇关于javascript - 如何设置css，让中间的input输入框对齐呀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！