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

时间:2013-08-06 00:47:22

标签: html css

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

http://jsfiddle.net/chovy/WcQ6J/

<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有效,但是当我添加输入时,它会换行到下一行。

5 个答案:

答案 0 :(得分:2)

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

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

FIDDLE

答案 1 :(得分: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不支持。

答案 2 :(得分:2)

这是一些令人讨厌的解决方案。老实说,我真的不明白为什么会这样。我在一个旧的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%;
}

答案 3 :(得分:0)

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

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

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

请参阅jsfiddle

答案 4 :(得分:0)

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

CSS:

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

HTML:

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

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