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插件计算的，因此使用css计算<a>标签的宽度不起作用。
此外，我需要跨度始终与它具有的宽度完全相同，因此display: flex也不起作用。
你对如何

有所了解吗？

谢谢！

Answer 1

使用display：tabel-cell作为按钮和范围

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: