HTML/Bootstrap 对齐表格中的变量元素

Question

我在这里遇到一个问题，我需要在表格中水平对齐两个元素(一个是 <span> 另一个是 <a> )。 <span>当我试图在表格中显示一棵树时用作压头。现在的问题是按钮( <a> )由于其内部文本(当您单击按钮时可以编辑文本)和 <span> 具有可变长度。由于按钮的父级数量，其长度可变。
每当按钮中的文本变得太长时，它就会插入压头下方的行中。
看这个fiddle :

<table style="width:70%;">
  <tr>
    <td>
      <span class="indenter" style="width:120px;display:inline-block;">
        <a>
          &nbsp;
        </a>
      </span>
      <a href="#" class="btn">
        text inside the a tag text inside the a tag
      </a>
    </td>
  </tr>
</table>

我不知道压头的宽度，因为它是由一些 js 插件计算的，因此计算 <a> 的宽度。带有 css 的标签不起作用。
此外，我需要跨度始终正好是它的宽度，所以 display: flex也不起作用。
你知道怎么做吗

谢谢!

Answer 1

使用 display: tabel-cell 作为按钮和 span

.indenter {
  border: 1px solid black;
  vertical-align: center;  
}

.indenter a:after {
  content:"-";
}

.btn {
  display: tabel-cell;
  color: #eb8b02;
  border: 1px solid #ccc;
  text-align: center;
  padding: 4px 12px;
  line-height: 20px;
  vertical-align: middle;
  cursor: pointer;
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  border-radius: 4px;
  text-decoration: none;
}

<table style="width:70%;">
  <tr>
    <td>
      <span class="indenter" style="width:120px;display:tabel-cell;">
         <a>
           &nbsp;
         </a>
      </span>
      <a href="#" class="btn">
         text inside the a tag text inside the a tag
      </a>
    </td>
  </tr>
</table>