表单元格计算不正确

user2024080 发表于 Dev

用户名

我正在努力保持自己form fieldsets的状态table-cells。我按百分比应用宽度。但field sets孩子的标签为“ not calculating the width as33.33％”。

这是什么问题？

*{
  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;
}

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

这____

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

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;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。