将 div 内元素的宽度固定为 table

Question

我无法将 div 显示中的元素宽度固定为 table，我意识到导致此问题的标题，我尝试修复它但没有成功，这是示例：

代码如下：

.row {
  display:table;
  border-spacing:10px;
  width: 100%;
  height: 100%;
}

.row-element {
  display: table-cell;
}
.row-element input{
  width:100%;
  line-height:20px;
}
.row-element label{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #2E2F3F;
display: table-caption;
white-space: nowrap;
  width:100%;
  box-sizing:border-box;
}

<div class="row">
  <div class="row-element">
    <label>Name#<span class="mandatory"> *</span></label>
 <input data="true" type="text" class="textfield error" title="Name" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory="">
     </div>
     <div class="row-element"><label>Outside Label &gt; <span class="mandatory"> *</span></label>
     
       <input data="true" type="text" class="textfield error" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory="">
     </div> 
<div class="row-element">
  <label>custom_mandatory text#<span class="mandatory"> (Please Specify)</span></label>
  <input data="true" type="text" class="textfield error" mandatory-text="(Please Specify)" title="custom mandatory text" message="Insert Your Name !" name="NAME_FIELD" mandatory="">
 </div>      
 </div>

Answer 1

这就是你想要的吗？我将 table-layout: fixed; 添加到 row 并将一些任意宽度添加到 row-element.

.row {
  display:table;
  border-spacing:10px;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

.row-element {
  display: table-cell;
  width: 100px;
}
.row-element input{
  width:100%;
  line-height:20px;
}
.row-element label{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #2E2F3F;
display: table-caption;
white-space: nowrap;
  width:100%;
  box-sizing:border-box;
}

<div class="row">
  <div class="row-element">
    <label>Name#<span class="mandatory"> *</span></label>
 <input data="true" type="text" class="textfield error" title="Name" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory="">
     </div>
     <div class="row-element"><label>Outside Label &gt; <span class="mandatory"> *</span></label>
     
       <input data="true" type="text" class="textfield error" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory="">
     </div> 
<div class="row-element">
  <label>custom_mandatory text#<span class="mandatory"> (Please Specify)</span></label>
  <input data="true" type="text" class="textfield error" mandatory-text="(Please Specify)" title="custom mandatory text" message="Insert Your Name !" name="NAME_FIELD" mandatory="">
 </div>      
 </div>

将 div 内元素的宽度固定为 table

Fixing the width of the elements inside a div display as table

css

row

css-tables