如何使元素适合父宽度CSS

Question

我正在尝试构建HTML用户界面。

这就是我所做的：

父div的宽度会自动更改，以包含其中的所有按钮。

例如，当有3个按钮时：

我试图添加一个添加按钮的选项。我在按钮后添加了一个文本框和一个保存按钮。

但由于某种原因，文本框占用了大量的宽度并使父母成长。

如何将文本框宽度设为父宽度？

我的代码：

<div id="savedSets" class="cotentBox" style="margin-right: auto; margin-left: auto;max-width: 90%; display: table;">
  <h3 class="header">Use saved sets</h3>

  <div class="content">
    <div id="setButtons">
      <button class="button savedSetButton">Set 2</button>
      <button class="button savedSetButton">Set 1</button></div>
    <div id="newSet">
      <button id="saveNewSet" class="button">Save new set!</button>
     <input type="text" id="newSetName">
    </div>
  </div>
</div>

感谢。

Answer 1

您可以将内容的div浮动到左侧，因此每个新div都会浮动到最后一个并位于同一行的旁边，并将输入的宽度更改为您喜欢的父div的百分比： / p>

.content div {
  float:left;
}
.content input {
  width:30%;
}

Answer 2

textarea width 100%效果很好，

    <div id="savedSets" class="cotentBox" style="max-width: 90%; display: table;border:1px solid black;margin:auto">
  <h3 class="header">Use saved sets</h3>

  <div class="content">
    <div id="setButtons" style="float:left;padding-right:4px">
      <button class="button savedSetButton">Set 2</button>
      <button class="button savedSetButton">Set 1</button></div>
    <div id="newSet">
      <button id="saveNewSet" class="button" style="float:left">Save new set!</button>
     <input type="text" id="newSetName" style="width:100%;border:none">
    </div>
  </div>
</div>