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

Question

我有一个容器 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%，它工作正常。但是，这不是一个选项，因为我的内容的宽度会有所不同。

无论我做什么，文本框似乎都有一个最小宽度 "wants"，所以整个容器都会打开。

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

Answer 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>

Answer 2

如果您可以使用 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>

Answer 3

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

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

.container {
    display:inline-block;
}

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

.input-container:after {
    content: "[=10=]a0"; /*&nbsp;*/
}

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

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

How can I make a text input only as wide as its parent div, without specifying an explicit width?

html

css

textbox

html-input