Html 并排设置文本框

我已经设置了动态创建的文本框，我想并排显示，而不是在另一个文本框下面显示

<div class="wrap-login100 p-l-20 p-t-25">
        <form class="form" name="add_name" id="add_name">
            <div class="control-group">
                <div class="inc">
                    <div class="testing">
                            
                            <div class="form-group col-md-10">
                                <input type="text" class="form-control" id="fname" name="fname" placeholder="Enter Manger First Name" > 
                                <div id="error" style="display:none; color: red;">Enter First Name before submission!</div>
                            </div>
                            <div class="form-group col-md-10">
                                <input type="text" class="form-control" id="lname" name="lname" placeholder="Enter Manager Last Name" >
                                <div id="error2" style="display:none; color: red;">Enter Last Name before submission!</div>
                            </div>
                            <div class="form-group col-md-10">
                            <button class="btn btn-primary" type="submit" id="append" name="append">
                            Add Team Details</button>
                            </div>
                          <br>
                          <br>
                    </div>
                </div>
                <div class="col-md-10 text-center">
                    <input type="button" class="btn btn-info btn-lg" id="submit" name="submit" value="Register"/>
                </div>
            </div>
        </form>
    </div>

提交前请输入名字！
提交前请输入姓氏！
添加团队详细信息

这是完美的，但当我动态创建文本框时，我希望它并排出现。与此相反：

以下是动态文本框代码：

<script>
var counter=0;
jQuery(document).ready( function () 
{
    
    $("#append").click( function(e) 
    {
        counter++;
          e.preventDefault();
        $(".inc").append('<div class="testing">\
                <div class="form-group col-md-10">TE - ' +counter+ '</div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="tename[]" id="tename"  placeholder="Enter TE Name"> </div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="hq[]" id="hq"  placeholder="Enter HQ"></div> \
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="state[]" id="state"  placeholder="Enter State"> </div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="department[]" id="department"  placeholder="Department"> </div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="teamno[]" id="teamno"  placeholder="Enter team number"> </div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="leadname[]" id="leadname"  placeholder="Enter Lead Name"></div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="holiday[]" id="holiday"  placeholder="Numbers of holidays entire week"></div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="offpermonth[]" id="offpermonth"  placeholder="Off Per month"></div>\
                <div class="form-group col-md-10"> <input class="form-control" type="text" name="lop[]" id="lop"  placeholder="LOP Details"></div>\
                <a href="#" class="remove_this btn btn-danger btn-lg">Remove</a>\
                <br>\
                <br>\
            </div>');
        return false;
        });

    jQuery(document).on('click', '.remove_this', function() {
        jQuery(this).parent().remove();
        counter--;
        return false;
        });
    $('#submit').click(function()
    {
      var textBox = $("#amname").val();
      var textBox2 = $("#rmname").val();
      
        if (textBox == "")
        {
            $("#error").show('slow');
        }
        else if (textBox2 == "")
        {
            $("#error2").show('slow');
        }
        else
        {
            $.ajax({
                url:"savedata.php",
                method:"POST",
                data:$('#add_name').serialize(),
                success:function(data)
                {
                    alert(data);
                    //window.location.replace("lobby.php");
                    
                }
            });
        }
    })
    
});

var计数器=0；
jQuery（文档）.ready（函数（）
{
$（“#追加”）。单击（函数（e）
{
计数器++；
e、 预防默认值（）；
$（“.inc”）。追加（$\
TE-“+计数器+”\
\
\
\
\
\
\
\
\
\
\

\

\
');
返回false；
});
jQuery（document）.on（'单击'，'）。删除此函数（）{
jQuery（this.parent（）.remove（）；
计数器--；
返回false；
});
$（“#提交”）。单击（函数（）
{
var textBox=$（“#amname”）.val（）；
var textBox2=$（“#rmname”）.val（）；
如果（文本框==“”）
{
$（“#错误”）.show（'slow'）；
}
else if（textBox2==“”）
{
$（“#error2”）.show（'slow'）；
}
其他的
{
$.ajax({
url:“savedata.php”，
方法：“张贴”，
数据：$（'#添加名称'）。序列化（），
成功：功能（数据）
{
警报（数据）；
//window.location.replace（“lobble.php”）；
}
});
}
})
});

---

我该怎么做呢？

display:inline block

是你的朋友。添加新类或给出

表单组

css，如下所示

var计数器=1；
$（“.inc”）。追加（$\
TE-“+计数器+”\
\
\
\
\
\
\
\
\
\
\

\

\
');
div.form-group{
显示：内联块
}

请仔细阅读一下


有3种方法，我已经尝试过上面提到的表方法，这对我很有效

使用display属性并排放置三个div的方法


显示：表格；此属性用于行为类似于表的元素（div）


显示：表格单元格；此属性用于行为类似于td的元素（div）


display:table row此属性用于行为类似于tr的元素（div）





.container.box{
宽度：540px；
利润率：50像素；
显示：表格；
}  
.container.box.box行{
显示：表格行；
}  
.container.box.box单元格{
显示：表格单元格；
宽度：33%；
填充：10px；
}  
.container.box.box-cell.box1{
背景：绿色；
颜色：白色；
文本对齐：对齐；
}  
.container.box.box-cell.box2{
背景：浅绿色；
文本对齐：对齐
}  
.container.box.box-cell.box3{
背景：石灰；
文本对齐：对齐；
} 
极客
这是一个学习编程的好平台。
这是一个教育网站。准备
基于产品的招聘驱动
微软、亚马逊、Adobe等公司
提供免费的在线实习准备
课程
本课程侧重于各种MCQ和
可能会在中提出的编码问题
面试&让你的未来成为现实
安置季节高效且成功。
任何极客都可以通过写作来帮助其他极客
关于Geeksforgek的文章，出版
文章遵循的几个步骤都是文章
这不需要多少修改/改进
来自评论员的评论首先发表。
div.form-group{display:inline block}我尝试了这个方法，但没有成功。我遗漏了什么吗？试试重要的，看起来像css覆盖
div.form-group{display:inline block！important；}
仍然相同：（或给出ne）