Question

我正在尝试将form fieldsets保留为table-cells。我按宽度应用宽度。但是field sets childer＆＃39;标签not calculating the width as 33.33％`。

这里有什么问题？

＆＃13;

*{
  padding:0;
  margin:0;
}

form{
/*   display:table;
width:100%; */
  border:1px solid gray;
}

legend {
  color:red;
  border-bottom:2px solid gray;
  width:100%;
}

filedlset {
  width:100%; /*width added*/
  background:brown;
  
}

filedlset label {
  display:table-cell;
  width:33.33%;/*not working*/
  border-right:1px solid blue;
}

filedlset label input {
  margin-bottom:0.5em;
  border:0;
  background:gray;
}

filedlset span {
  display:block;
  margin-bottom:0.5em;
}

＆＃13;

 <form action="">
      
      <filedlset>
        <legend>Form1</legend>
        <label for=""><span>Name: </span> <input type="text"> <span>Error</span></label>
        <label for=""><span>Middle: </span> <input type="text"> <span>Error</span></label>
        <label for=""><span>Last: </span> <input type="text"> <span>Error</span></label>
      </filedlset>
     
      
    </form>

＆＃13;

Answer 1

删除display: table-cell个元素，并在容器上使用flex（并在具有填充和/或边框的元素上添加box-sizing: border-box;）：

＆＃13;

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  background: skyblue;
}

form {
  width:100%;
  border:1px solid gray;
  box-sizing: border-box;
}

legend {
  color:red;
  background: khaki;
  border-bottom: 2px solid gray;
  width:100%;
  box-sizing: border-box;
}

filedlset {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width:100%; /*width added*/   
}

filedlset label {
  width:33.33%;  
  border-right:1px solid blue;
  background: lavender;
  box-sizing: border-box;
}

filedlset label input {
  margin-bottom:0.5em;  
  border:0;
  background:gray;
}

filedlset span {
  display:block;
  margin-bottom:0.5em;
}

.a {
margin-top: 5px;
margin-left: 5px;
display: inline;
}

input[type=text] {
width: 68%;
margin-top: 5px;
margin-right: 5px;
}

＆＃13;

<form action="">
<filedlset>
<legend>Form1</legend>

<label for=""><span class=a>Name: </span> <input type="text"> <span style="background:tomato">Error</span></label><label for=""><span class=a>Middle: </span> <input type="text"> <span style="background:tomato">Error</span></label><label for=""><span class=a>Last: </span> <input type="text"> <span style="background:tomato">Error</span></label>

</filedlset>
</form>

＆＃13;

Answer 2

<!DOCTYPE html>
 <html>
 <head>
 <style>
 *{
  padding:0;
  margin:0;
}

form{
/*   display:table;
     width:100%; */
  border:1px solid gray;
  margin: 3px;
}

legend {
  color:red;
  border-bottom:2px solid gray;
  width:100%;
}

filedlset {
  width: 100%;/*width added*/
  background:brown;
  
}

.man {
  display:table-cell;
  width:5%;/*not working*/
  border-right:1px solid blue;
  padding-left: 5px;
}

filedlset label input {
  margin-bottom:0.5em;
  border:0;
  background:gray;
  width: 80%;
}

filedlset span {
  display:block;
  margin-bottom:0.5em;
}
 </style>
 </head>
 <body>
 <form action="">
      
      <filedlset>
        <legend>Form1</legend>
        <label class="man"><span>Name: <input type="text"></span>  <span>Error</span></label>
        <label class="man"><span>Middle: <input type="text"></span>  <span>Error</span></label>
        <label class="man"><span>Last: <input type="text"></span>  <span>Error</span></label>
      </filedlset>
        
    </form>
</body>
</html>

看看，如果这是你想要的

表格单元格未正确计算

2 个答案: