Question

我有以下html标签，我想使用css3当前其工作但使用jquery代码将所有输入元素放在父行div中的单行（响应）中。任何人都可以帮我创建css3或更少的公式为这个父div宽度划分每个子元素

       <div class="row actualDiv">  
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
                <input typeof="text" placeholder="P1-D1" type="text" value="">
        </div>

我有以下jquery代码

var Totalwidth = parseInt($('.actualDiv').css('width').replace('px', ''));
    var $child = $('.actualDiv').find('input[type="text"]');
    var eachwidth = Totalwidth / $child.length;
    $child.css('width', eachwidth + 'px');

Answer 1

编辑：

如果你可以使用flex，那么可以通过css实现。请注意，并非所有浏览器都支持：caniuse-flexbox。

.actualDiv {
  display: -webkit-flex;
  display: flex;
}

.actualDiv input[type="text"] {
  -webkit-flex: 1;
  flex: 1;
}

<div class="row actualDiv">  
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
   <input typeof="text" placeholder="P1-D1" type="text" value="">
</div>

如何使用css3适应父div中的所有输入元素

1 个答案: