Question

让我们假设我有一行内有3个项目（CSS内部样式标签以简化）。

<div style="display:table">
    <div style="display:table-cell">
        <span>Some text</span>
        <button type="button">Some button</button>
    </div>
    <div style="display:table-cell">
        <span>Some Other text</span>
        <button type="button">Some button</button>
    </div>
    <div style="display:table-cell">
        <span>Long Long Long Long Long Long Long text </span>
        <button type="button">Some button</button>
    </div>
</div>

无论文本的长度如何，如何更改所有三个按钮位于同一行的问题？现在文本不相等，然后按钮不在同一行。

Answer 1

忽略样式（那是不存在的）。

您需要添加一行来分隔内容。

https://jsfiddle.net/yoxer670/

    <div style="display:table">
  <div style="display: table-row">
    <div style="display:table-cell" class="tableCell">
        <span>Some text</span>
    </div>
    <div style="display:table-cell" class="tableCell">
        <span>Some Other text</span>
    </div>
    <div style="display:table-cell" class="tableCell">
        <span>Long Long Long Long Long Long Long text </span>
    </div>
  </div>
  <div style="display: table-row">
    <div style="display:table-cell" class="tableCell">
        <button type="button">Some button</button>
    </div>
    <div style="display:table-cell" class="tableCell">
        <button type="button">Some button</button>
    </div>
    <div style="display:table-cell" class="tableCell">
        <button type="button">Some button</button>
    </div>
  </div>
</div>

Answer 2

如果您不想更改html代码，则只能使用css样式。我将.cell类添加到表格单元格中。

.cell {
    position: relative;
    padding-bottom: 30px;
}

.cell button {
    position: absolute;
    bottom: 0;
    left: 0;
}

在display：table中对齐底部嵌套项

2 个答案: