扩展下划线（或边框）以填充水平 space

Question

我正在创建一个弹出窗口，向用户显示他们所做的选择并允许他们复制到剪贴板或取消。这不是一个实际的表格（此时文本不可编辑），但我们的想法是它应该类似于一个填写好的打字表格。

为了紧凑，我使用 Flexbox 行。我希望水平线（见红色）扩展以填充可用 space，以创建 actual 形式的外观，其中输入的长度不是已知。

body em {
  font-family: 'Brygada 1918';
  font-size: 90%;
}

#border_box {
  border: 6px double black;
  padding: 12pt;
}

#id_card {
  justify-content: center;
  width: 540px;
  background: url(https://bladesnpc.com/bitd-images/paper_texture.png) rgba(244, 241, 230, 1);
  padding: 12pt;
  font-family: Courier;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -1px -1px 1px rgba(0, 0, 0, 0.6);
}

.formfill {
  display: inline-block;
  border-bottom: 1px solid black;
  width: auto;
  margin-bottom: 1em;
}

.attributes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbreak {
  width: 100%;
}

<div id="id_card">
  <div id="border_box">
    <div id="chosen_name">
      <h3>John Doe</h3>
    </div>
    <div class="attributes">
      <div>
        <em>Heritage: </em>
        <div class="formfill">heritageval</div>
      </div>
      <div>
        <em>Looks: </em>
        <div class="formfill">looksval</div>
      </div>
      <div>
        <em>Style: </em>
        <div class="formfill">styleval</div>
      </div>
      <div>
        <em>Profession: </em>
        <div class="formfill">profval</div>
      </div>
      <div>
        <em>Trait: </em>
        <div class="formfill">traitval</div>
      </div>
      <div>
        <em>Goals: </em>
        <div class="formfill">goalsval</div>
      </div>
      <div>
        <em>Interests: </em>
        <div class="formfill">interestsval</div>
      </div>
      <div>
        <em>Mayhem: </em>
        <div class="formfill">mayhemval</div>
      </div>
    </div>
    <hr class="hr_bottom" style="margin-top: 1em;">
    <div class="flexbreak"><span>COPY</span>&nbsp;&nbsp;&nbsp;<span>CANCEL</span></div>
  </div>
</div>

有没有办法在仍然使用 flex 的情况下实现这一点？

Answer 1

使用以下更改更新您的 css 代码：

// add this code:
.attributes > div {
  display: flex;
  flex: 1;
}
.
.
.
.formfill {
  display: inline-block;
  border-bottom: 1px solid black;
  width: 100%; //  edited from auto to 100%
  margin-bottom: 1em;
}

希望这个回答对你有帮助，祝你好运。

Answer 2

您可以像下面这样更新您的代码（查看评论）

body em {
  font-family: 'Brygada 1918';
  font-size: 90%;
}

#border_box {
  border: 6px double black;
  padding: 12pt;
}

#id_card {
  justify-content: center;
  width: 540px;
  background: url(https://bladesnpc.com/bitd-images/paper_texture.png) rgba(244, 241, 230, 1);
  padding: 12pt;
  font-family: Courier;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -1px -1px 1px rgba(0, 0, 0, 0.6);
}

.formfill {
  display: inline-block;
  border-bottom: 1px solid black;
  width: auto;
  margin-bottom: 1em;
}

.attributes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* make all the element fill the remaining space except for 3,6 and 8 */
.attributes > *:not(:nth-child(3),:nth-child(6),:nth-child(8)) {
  flex-grow:1;
}
/* make the flex container */
.attributes > * {
  display:flex;
}
/* the formfill will fill all the space and will stretch the line*/
.attributes > * .formfill {
  flex-grow:1;
  margin-left:5px;
}
.flexbreak {
  width: 100%;
}

<div id="id_card">
  <div id="border_box">
    <div id="chosen_name">
      <h3>John Doe</h3>
    </div>
    <div class="attributes">
      <div>
        <em>Heritage: </em>
        <div class="formfill">heritageval</div>
      </div>
      <div>
        <em>Looks: </em>
        <div class="formfill">looksval</div>
      </div>
      <div>
        <em>Style: </em>
        <div class="formfill">styleval</div>
      </div>
      <div>
        <em>Profession: </em>
        <div class="formfill">profval</div>
      </div>
      <div>
        <em>Trait: </em>
        <div class="formfill">traitval</div>
      </div>
      <div>
        <em>Goals: </em>
        <div class="formfill">goalsval</div>
      </div>
      <div>
        <em>Interests: </em>
        <div class="formfill">interestsval</div>
      </div>
      <div>
        <em>Mayhem: </em>
        <div class="formfill">mayhemval</div>
      </div>
    </div>
    <hr class="hr_bottom" style="margin-top: 1em;">
    <div class="flexbreak"><span>COPY</span>&nbsp;&nbsp;&nbsp;<span>CANCEL</span></div>
  </div>
</div>

扩展下划线（或边框）以填充水平 space

Extend underlines (or borders) to fill horizontal space

css

underline

flexbox