我的目标是以一种类似于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>
最佳答案
你有正确的想法；您只是忘了在容纳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>