Html 显示为表格的div内部显示为表格的div_Html_Css

Html 显示为表格的div内部显示为表格的div

html css

Html 显示为表格的div内部显示为表格的div,html,css,Html,Css,我的目标是以一种类似于Android布局的方式使用HTML/CSS，但我得到了一些奇怪的渲染我有嵌套的div集，由CSS编程显示为表、表行和表单元格。我的目标是让内部表将父表的宽度与width:100%匹配，但我得到的是。。。（见图）我能想到的唯一一件事就是创建新的CSS类，并将内部表分配给它们？（我想避免的事情） div.label { 显示：表格单元格； } 分区输入 { 显示：表格单元格； } 分区错误 { 显示：表格单元格； } div.inputlabel { 显示：表格行；边

我的目标是以一种类似于Android布局的方式使用HTML/CSS，但我得到了一些奇怪的渲染

我有嵌套的div集，由CSS编程显示为表、表行和表单元格。我的目标是让内部表将父表的宽度与

width:100%

匹配，但我得到的是。。。（见图）

我能想到的唯一一件事就是创建新的CSS类，并将内部表分配给它们？（我想避免的事情）

div.label
{
显示：表格单元格；
}
分区输入
{
显示：表格单元格；
}
分区错误
{
显示：表格单元格；
}
div.inputlabel
{
显示：表格行；
边框：1px纯黑；
填充：10px；
保证金：5px；
背景色：#6b81e2；
宽度：100%；
}
分区表
{
显示：表格；
边框：1px纯黑；
填充：10px；
保证金：5px；
背景色：#ecc1ec；
宽度：100%；
}
新成员
名字
姓
电子邮件地址
电话号码
街道地址
添加产品
加职业
添加公司/服务

你的想法是对的；在适应时，您只是忘记了考虑。您需要从计算的

100%

宽度中减去这两个边距，幸运的是，使用CSS'可以非常轻松地完成这项工作

b由于您的结构复杂，您需要为此偏移量调整三次，每次调整两个方向，总共需要计算

调整量

因此，对于

.div.table

，您要查找的是

宽度：calc（100%-（5px*（3*2））

：

div.label{
显示：表格单元格；
}
分区输入{
显示：表格单元格；
}
分区错误{
显示：表格单元格；
}
div.inputlabel{
显示：表格行；
边框：1px纯黑；
填充：10px；
保证金：5px；
背景色：#6b81e2；
宽度：100%；
}
分区表{
显示：表格；
边框：1px纯黑；
填充：10px；
保证金：5px；
背景色：#ecc1ec；
宽度：计算（100%-（5px*（3*2））；
}


名字
姓
电子邮件地址
电话号码
街道地址
添加产品
加职业
添加公司/服务

注意：

和

不使用或不需要结束斜杠。您的

标记无效，底部带有结束斜杠，需要删除。事实上，您可以删除括号内的所有内容，除了单词script

div.label
{
    display:table-cell;

}
div.input
{
    display:table-cell;

}
div.error
{
    display:table-cell;

}
div.inputlabel
{
    display:table-row;
    border: 1px solid black;
    padding:10px;
    margin: 5px;
    background-color:#6b81e2;
    width:100%;

}
div.table
{
    display:table;
    border: 1px solid black;
    padding:10px;
    margin: 5px;
    background-color:#ecc1ec;
    width:100%;
}


<?php 
    include('libraries/database_config.php');

    print_r($_POST);
?>
<!DOCTYPE html>
<html>
    <head>
        <script src="libraries/jquery-3.3.1.min.js"></script>
        <link href="libraries/dist/css/select2.min.css" rel="stylesheet" />
        <script src="libraries/dist/js/select2.min.js"></script>

        <link rel="stylesheet" href="styles/style.css">
        <title>New Membership</title>
    </head>
    <body>
        <form action="" method="POST">
            <div class="table">
                <div class="inputlabel">
                    <div class="label">
                        <div class="table">
                            <div class="inputlabel">
                                <div class="label">
                                    First Name
                                </div>
                                <div class="input>">
                                    <input type="text" name="fname"/>
                                </div>
                                <div class="error">

                                </div>
                            </div>
                            <div class="inputlabel">
                                <div class="label">
                                    Last Name
                                </div>
                                <div class="input>">
                                    <input type="text" name="lname"/>
                                </div>
                                <div class="error">

                                </div>
                            </div>
                            <div class="inputlabel">
                                <div class="label">
                                    Email Address
                                </div>
                                <div class="input>">
                                    <input type="text" name="email"/>
                                </div>
                                <div class="error">

                                </div>
                            </div>
                            <div class="inputlabel">
                                <div class="label">
                                    Phone Number
                                </div>
                                <div class="input>">
                                    <input type="text" name="phone"/>
                                </div>
                                <div class="error">

                                </div>
                            </div>
                            <div class="inputlabel">
                                <div class="label">
                                    Street Address
                                </div>
                                <div class="input>">
                                    <input type="text" name="streetaddress"/>
                                </div>
                                <div class="error">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="inputlabel">
                    <div class="label">
                        <div class="table">
                            <div class="inputlabel">
                                <div class="label">
                                    <button type="button">Add Product</button>
                                </div>
                                <div class="label">
                                    <button type="button">Add Profession</button>
                                </div>
                                <div class="label">
                                    <button type="button">Add Company/Service</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="inputlabel" id="data_div">

                </div>
            </div>
        </form>



        <script type="text/javascript"/>

        </script>
    </body>
</html>