如何在不指定显式宽度的情况下使文本输入仅与其父 div 一样宽？答案

【问题标题】：How can I make a text input only as wide as its parent div, without specifying an explicit width?如何在不指定显式宽度的情况下使文本输入仅与其父 div 一样宽？
【发布时间】：2015-05-31 05:38:26
【问题描述】：

我有一个包含两个子 div 的容器 div，一个是文本框，另一个是它下面的标签，如下所示：

.container { display:inline-block; }

<div class="container">
  <div class="input-container"><input type="text" /></div>
  <div class="label">Some text here</div>
</div>

我希望容器的宽度与标签 div 一样宽，并且我希望文本框的宽度相同。

如果我为容器使用显式宽度，我可以为输入设置width:100%，它工作正常。但是，这不是一个选项，因为我的内容的宽度会有所不同。

无论我做什么，文本框似乎都具有它“想要”的最小宽度，因此整个容器都被撑开。

如何使输入仅与包含的 div 一样宽，其宽度被收缩包装以匹配文本？换句话说，在上面的示例中，我希望文本“这里有一些文本”来指示文本框和容器的宽度。

【问题讨论】：

标签： html css textbox html-input

【解决方案1】：

首先，父 div 需要它的宽度。

那么有两种选择。

<div class="container">
    <div class="input-container" style="width:200px"><input type="text" style="width:100%"/></div>
    <div class="label">Some text here</div>
</div>

<div class="container">
    <div class="input-container" style="width:200px"><input id="input-box" type="text" /></div>
    <div class="label">Some text here</div>
</div>
<script>
    var parentWidth = document.getElementsByClassName("input-container")[0].style.width;
    document.getElementById("input-box").style.width = parentWidth;
</script>

【讨论】：

【解决方案2】：

在输入框上设置绝对位置并设置100％宽度的想法，因此它总是根据标签文本的长度获得相同的宽度。

演示： http://jsfiddle.net/43jm73gs/1/

.container {
    display:inline-block;
}

.input-container {
    position: relative;
    margin-bottom: 10px;
}

.input-container:after {
    content: "\00a0"; /*&nbsp;*/
}

.input-container input {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
}

【讨论】：

非常感谢！我想在不使用 javascript 布局技巧的情况下做到这一点。太棒了。只有一个问题——即使没有 .input-container:after CSS，它似乎也能正常工作。这是在做什么？
因为输入位置是绝对的，这也会导致容器崩溃，但是在里面放置一个伪内容可以防止这种情况发生。或者为容器设置一个最小固定高度也可以 - jsfiddle.net/43jm73gs/3 我可以看到你在 /2 上尝试了什么，也看看这个jsfiddle.net/43jm73gs/4 我相信你会明白的。
啊，我明白了。我已经使用了足够的 margin-bottom，它与使用 margin 加上显式高度具有相同的效果。这很棒。再次感谢！

【解决方案3】：

如果您可以使用 jquery，我会执行以下操作：

$('.label').each(function() {
  //get width of label
  var labelWidth = $(this).width();
  //apply that width to the input before it
  $(this).prev().children('input').css('width', labelWidth);
});

.container {

  display: inline-block;

}

.label {

  white-space: nowrap;

  display: inline-block;

}

.container input {

  display: block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="input-container">
    <input type="text" />
  </div>
  <div class="label">Some text here</div>
</div>

【讨论】：