Question

所以我有一个<div>与display:table;，它有10个孩子（计数可能会有所不同，孩子可能是按钮或输入）display:table-cell;我已经设置了宽度所有孩子除了一个。我希望最后一个没有固定宽度的孩子填充宽度。

例如，让我们说父<div>宽度为600px，有4个按钮，每个宽度为40px，我想要第五个元素宽度为440px而不设置它staticaly。

这是我到目前为止所做的：

HTML：

<div class="table">
    <button class="show"></button>
    <div class="id">TEXT</div>
    <div class="username">TEXT</div>
    <div class="dob">TEXT</div>
    <button class="edit"></button>
    <button class="delete"></button>
</div>

CSS：格

.table {
    display:table;
    width:100%;
    height:40px;
}
div.table > * {
    display:table-cell;
    height:40px;
    line-height:40px;
}
div.table > button {width:64px;}
div.table > div.id {width:48px;}
div.table > div.dob {width:128px;}

//编辑：我想要填充空格的元素是div.username

Answer 1

你可以使用flexbox

轻松完成

section {
  display: flex;
  max-width: 600px
}

div {
  flex: 0 40px;
  border: 1px solid red
}

div:last-of-type {
  flex: 1
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>

Answer 2

简单地说，如果没有指定宽度，最后一个孩子将占用剩余空格：

.table {
  display: table;
  width:400px;
  border:1px solid green;
}

.table>div {
  display: table-cell;
  height:50px;
  border:1px solid red;
}

.item {
  width: 40px;
}

<div class="table">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div></div>
</div>

<强>更新

在您使用带有按钮元素的display:table-cell的情况下，此属性不适用，因为此属性无法应用于按钮（与其他按钮一样）。所以最好将按钮包含在span或div内并在其上应用CSS。

以下是有用的链接，可以帮助您了解更多信息：

display: table-cell, border-spacing don't work with buttons?

Setting a <button>'s display as table-cell

带有孩子的CSS Div表现得像桌子，让一个孩子填充宽度

2 个答案: