动态添加的输入字段增加了容器的宽度答案

【问题标题】：Dynamically added input field increases width of container动态添加的输入字段增加了容器的宽度
【发布时间】：2023-03-10 14:35:01
【问题描述】：

我有一个带标题的标签。当用户双击它时，我想使其可编辑。所以目前我用标题隐藏 div 并通过动态添加输入元素来替换它。当我动态添加输入元素时，标题包装器 div 的大小会增加。我希望我动态添加的输入与标题元素的大小相同（现在隐藏）。包装器 div 的大小应该保持不变。我已经尝试过使用 js 的解决方案。但我正在寻找一个纯粹使用 CSS 的解决方案。这个用例是否可以单独使用 css 来实现。我希望我的标题包装器是流动的，而不是固定宽度。我只希望我的输入与具有类头的 div 的宽度相同。输入的宽度和大小应与头部宽度相同。

function dblClickHanlder(){
  console.log("dbl click handler called");
  let inputEl = document.createElement("input");
  inputEl.style.display="inline-block";
  let headEl = document.querySelector(".head");
  headEl.style.display="none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}

* {
    box-sizing: border-box;
}
.wrapper{
  border: 1px solid black;
  display:flex;
  flex:1 0 auto;
}
.header-wrapper{
  display: flex;
  border: 1px solid red;
}

<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
 </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你可以在移除之前获取head元素之前的宽度和高度，并设置为新创建的input；

  inputEl.style.width = headEl.offsetWidth + "px";
  inputEl.style.height = headEl.offsetHeight + "px";

检查下面的sn-p：

function dblClickHanlder(){
  console.log("dbl click handler called");
  let headEl = document.querySelector(".head");
  let inputEl = document.createElement("input");
  inputEl.style.width = headEl.offsetWidth + "px";
  inputEl.style.height = headEl.offsetHeight + "px";
  headEl.style.display="none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}

* {
    box-sizing: border-box;
}
.wrapper{
  border: 1px solid black;
  display:flex;
  flex:1 0 auto;
}
.header-wrapper{
  display: flex;
  border: 1px solid red;
}

<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
 </div>
</div>

【讨论】：

我不希望我的包装 div 既不是输入也不是固定宽度或高度。
@webster 好的，如果您不将它们包装在固定大小的包装器中，这是不可能的；完全流畅的父母的唯一解决方案是 JS，检查编辑的答案

【解决方案2】：

只需将以下类添加到您的 CSS：

.header-wrapper input {
  max-width: 50px;
}

以下是工作示例：

function dblClickHanlder() {
  console.log("dbl click handler called");
  let inputEl = document.createElement("input");
  inputEl.style.display = "inline-block";
  let headEl = document.querySelector(".head");
  headEl.style.display = "none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid black;
  display: flex;
  flex: 1 0 auto;
}

.header-wrapper {
  display: flex;
  border: 1px solid red;
}

.header-wrapper input {
  max-width: 50px;
}

<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
  </div>
</div>

【讨论】：