0

我正在尝试使用弹性框和表格重新创建表单,但是遇到了格式问题,即子弹性项目没有拉伸以填充父项的整个宽度。

这是我的 HTML/CSS:

.container {
  display: flex;
  /* or inline-flex */
  display: -webkit-flex;
  flex-direction: row;
  width: 100%;
  padding: 1em 0;
}

.left_col {
  display: flex;
  width: 5%;
}

.left_col .number {
  text-align: center;
  font-size: 400%;
  font-weight: bold;
}

.right_col {
  display: flex;
  flex: 2;
  margin-left: 10px;
  width: 95%;
}

.field {
  width: 100%;
}

.field td.cell {
  text-align: center;
  border: 1px solid #dddddd;
  padding: 8px;
}
<div class="container">
  <div class="left_col">
    <p class="number">2</p>
  </div>

  <div class="right-col">
    <p>Fill in identifying information concerning the employee.</p>
    <table class="field">
      <tr>
        <td class="cell" style="width: 50%;">
          <label>Name $[SP]<i>(last, first, middle)</i></label>
          <input class="sf2817" type="text" id="Full_Name" name="Full_Name" style="background-color:#dddddd" value="${jvar_full_name}" readonly="readonly" />
        </td>
        <td class="cell" style="width:23%;">
          <label>Date of birth$[SP] <i>(mm/dd/yyyy)</i></label>
          <input class="sf2817" type="text" id="dob" name="dob" style="background-color:#dddddd" value="${jvar_date_of_birth}" readonly="readonly" />
        </td>
        <td class="cell" style="width:27%;">
          <label>Social Security Number</label>
          <input class="sf2817" type="text" id="ssn" name="ssn" style="background-color:#dddddd" value="${jvar_ssn}" readonly="readonly" />
        </td>
      </tr>
    </table>
    <table class="field">
      <tr>
        <td class="cell" style="width: 32%;">
          <label>Employing department or agency</label>
          <input class="sf2817" type="text" id="department" name="department" style="background-color:#dddddd" value="${jvar_job_agency}" readonly="readonly" />
        </td>
        <td class="cell" style="width:18%;">
          <label>OWCP claim number, if applicable</label>
          <input class="sf2817" type="text" id="owcp" name="owcp" />
        </td>
        <td class="cell" style="width:28%;">
          <label>Location of department of agency where you work $[SP] <i>(city, state, ZIP code)</i></label>
          <input class="sf2817" type="text" id="dept_location" name="dept_location" style="background-color:#dddddd" value="${jvar_job_location}" readonly="readonly" />
        </td>
        <td class="cell" style="width:22%;">
          <label>Daytime telephone number$[SP] <i>(including area code)</i></label>
          <input class="sf2817" type="text" id="phone" name="phone" style="background-color:#dddddd" value="${jvar_mobile_phone}" readonly="readonly" />
        </td>
      </tr>
    </table>
  </div>
</div>

<hr style="height:1px;border:none;color:#000;background-color:#000; margin:0;" />

<div class="container">
  <div class="left_col">
    <p class="number">3</p>
  </div>

  <div class="right-col">
    <p><b>To elect or retain Basic,</b>$[SP] sign and date below. If you do not sign for Basic, you (or your assignee) may not elect or retain any form of optional insurance. If you do not want any insurance at all, skip to Section 5.</p>
    <table class="field">
      <tr style="border-top:1px solid black;">
        <td class="cell" style="width: 15%; background-color: #ddd; border-bottom:1px solid black" rowspan="2">
          <font size="4"><b>Basic</b></font>
        </td>
        <td class="cell" style="width: 85%; text-align:left;" colspan="2">
          <p><b>I want Basic.</b>$[SP] I authorize deductions to pay my share of the cost. (Basic may be provided without cost to U.S. Postal employees.)</p>
        </td>
      </tr>
      <tr>
        <td class="cell" style="width: 60%; border-bottom:1px solid black">
          <label><b>SIGNATURE</b>$[SP]<i>Do not print. Only you or your assignee may sign. Signature by guardians, conservators or through a power of attorney are <b>not</b>$[SP] valid</i></label>
          <i class="fa fa-caret-right" style="font-size:24px"></i>$[SP]$[SP]<input class="sf2817" type="text" id="basic_signature" name="basic_signature" style="background-color:#dddddd" value="/s/ ${jvar_full_name}" readonly="readonly" />
        </td>
        <td class="cell" style="width:40%; border-bottom:1px solid black">
          <label>Date $[SP]<i>(mm/dd/yyyy)</i></label>
          <input class="sf2817" type="text" id="basic_signature_date" name="basic_signature_date" style="background-color:#dddddd" readonly="readonly" />
        </td>
      </tr>
    </table>
  </div>
</div>

从这段代码中,这就是我得到的: 在此处输入图像描述

第 3 节中的表格由于某种原因没有拉伸其容器的整个宽度,我不知道为什么。有什么建议么?

4

0 回答 0