Question

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

我有嵌套的div集，由CSS编程显示为表格，表格行和表格单元格。我的目标是使内表与父表的宽度匹配width:100%，但我得到了这个......（见图）

我唯一能想到的就是制作新的CSS类并将内部表分配给那些？（我想避免的东西）

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>

Answer 1

你有正确的想法;在适应 margin 时，您只是忘记考虑 box model 。您需要从计算出的100%宽度中减去两个边距，幸运的是，使用CSS calc() property 可以轻松完成。

由于您的结构复杂，您需要调整此偏移三次，并且每次都要调整两次，总共需要计算6次调整。

因此，对于.div.table，您正在寻找width: calc(100% - (5px * (3 * 2)))：

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: calc(100% - (5px * (3 * 2)));
}

<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>
</body>

Div显示为div内的表格显示为表格

1 个答案: