html - 如何修复与另一个元素内联的元素，而不管前一个元素的大小

Question

我有四个div，它们都是内联。但是，无论第一个 div 有多长，我都需要让第一个和第二个 div 之间的距离保持不变。这是一张图片:

如您所见，在第二行，“Save for later”(以及其余 div)移动了一点，因为 Name - Joe 比 Name - 占用更多空间鲍勃。无论之前的 div 长度如何，我怎样才能让它们保持不变？我正在尝试找出一种无需单独执行的方法。

这是我的代码:

.searchProgramsResult {
  font-family: 'Roboto', sans-serif;
  background-color: #DADBDB;
  height: 100px;
  line-height: 100px;
  padding-left: 10px;
  margin-top: 25px;
  font-size: 28px;
  color: #2BC2D3;
  font-weight: 500;
}
.searchProgramsAdditional1 {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  line-height: 100px;
  padding-left: 300px;
  font-size: 28px;
  color: #47BC47;
  font-weight: 500;
  position: fixed;
}
.searchProgramsBar {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  line-height: 100px;
  padding-left: 500px;
  font-size: 38px;
  color: #0F0F0F;
  font-weight: 500;
  position: fixed;
}
.searchProgramsAdditional2 {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  line-height: 100px;
  padding-left: 550px;
  font-size: 28px;
  color: #D41B1B;
  font-weight: 500;
  position: fixed;
}

<div class = "searchProgramsResult" id = "searchProgramsResult1">Name - Bill<span class = "searchProgramsAdditional1" id = "searchProgramsAdditional11">Save for later</span><span class = "searchProgramsBar"> - </span><span class = "searchProgramsAdditional2" id = "searchProgramsAdditional12">Report a bug</span></div>
<div class = "searchProgramsResult" id = "searchProgramsResult2">Name - Joe<span class = "searchProgramsAdditional1" id = "searchProgramsAdditional21">Save for later</span><span class = "searchProgramsBar"> - </span><span class = "searchProgramsAdditional2" id = "searchProgramsAdditional22">Report a bug</span></div>

您需要将此代码片段作为完整页面打开，因为此代码是为网站构建的。

Answer 1

将名称也包装在 span 元素中，然后使用 CSS 表格。

div {
  display: table-row;
}

span {
  display: table-cell;
  padding: 0 1em;
}

.name {
  white-space: nowrap;
}

<div class="searchProgramsResult" id="searchProgramsResult1"><span class="name">Name - Bill</span><span class="searchProgramsAdditional1" id="searchProgramsAdditional11">Save for later</span><span class="searchProgramsBar"> - </span><span class="searchProgramsAdditional2" id="searchProgramsAdditional12">Report a bug</span></div>
<div class="searchProgramsResult" id="searchProgramsResult2"><span class="name">Name - Joe</span><span class="searchProgramsAdditional1" id="searchProgramsAdditional21">Save for later</span><span class="searchProgramsBar"> - </span><span class="searchProgramsAdditional2" id="searchProgramsAdditional22">Report a bug</span></div>