Question

我试图让标签和输入字段出现在同一行，可变宽度输入字段将根据可用空间进行扩展

<div class="clearfix">
    <aside>foo</aside>
    <span><input type="text" value="Enter text" /></span>
</div>

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

div {
    border: 1px solid red;
}

aside {
    display: block;
    width: 100px;
    background: #eee;
    float: left;
}

span {
    display: block;
    width: 100%;
    background: #ccc;
}

input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #000;
}

它与span有效，但是当我添加输入时，它会换行到下一行。

Answer 1

您可以使用CSS calc属性来确定宽度减去边框和宽度：

input {
  width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
  box-sizing: border-box;
  border: 1px solid #000;
}

FIDDLE

Answer 2

您可以使用display: table-*：

div {
    display: table;
    width: 100%;
    background-color: #ccc;
}
aside {
    display: table-cell;
    width: 100px;
    background: #eee;
}
span {
    display: table-cell;
    background: #bbb;
}
input {
    display: block;
    width: 100%;
    background-color: #ddd;
}

http://jsfiddle.net/userdude/WcQ6J/5/

这与display: inline-block的兼容性（并且更加灵活），IE8不支持。

Answer 3

这是一些令人讨厌的解决方案。老实说，我真的不明白为什么会这样。我在一个旧的codepen中有它。祝你好运！

http://jsfiddle.net/sheriffderek/DD73r/

HTML

<div class="container">

  <div class="label-w">
    <label for="your-input">your label</label>
  </div>

  <div class="input-w">
    <input name="your-input" placeholder="your stuff" />
  </div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  float: left;
  height: 2em;
}

.label-w {
  width: 8em;
  height: 100%;
  float: left;
  border: 1px solid red;
  line-height: 2em;
}

.input-w {
  float: none; /* key */
  width: auto; /* key */
  height: 100%;
  overflow: hidden; /* key */
  border: 1px solid orange;
}

.input-w input {
  width: 100%;
  height: 100%;
}

Answer 4

您可以将“旁边”的宽度设置为像素，将跨度设置为百分比，但正如您所见，这会导致问题。将两者都设置为百分比更容易。此外，“内联块”将使您的元素符合标准。您可以使用此或“float：right;”，但我更喜欢设置显示。

aside {
    display: inline-block;
    width: 9%;
}

span {
    display: inline-block;
    width: 90%;
}

请参阅jsfiddle。

Answer 5

如果您想要一个真正可变宽度的输入字段，以便可以手动调整其宽度以填充整个页面或其他任何方便的宽度，为什么不让该输入元素填充100％可调整大小的div？ / p>

CSS：

<style>
   div.resize {
      width: 300px; /*initial width*/
      resize: horizontal;
      overflow: auto;
   }

HTML：

<div class="resize">
   <input style="width: 100%" />

要拖动以调整div大小的小三角形将出现在输入元素的右下角！

如何制作可变宽度输入字段

5 个答案: