4

我正在尝试使标签和输入字段出现在同一行，并具有可变宽度的输入字段，该字段将根据可用空间进行扩展

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;
}

它适用于跨度，但是当我添加输入时，它会换行到下一行。

4

5 回答 5

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-blockIE8 不支持的更兼容（和灵活）。

于 2013-08-06T01:07:42.200 回答
2

这是一些古怪的解决方案。老实说，我真的不明白为什么会这样。我把它放在一个旧的代码笔里。祝你好运！

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%;
}
于 2013-08-06T01:51:05.453 回答
2

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

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

小提琴

于 2013-08-06T01:00:06.577 回答
0

您可以将“旁边”的宽度设置为像素，将跨度设置为百分比，但是，正如您所见，这会导致问题。将两者都设置为百分比更容易。此外，“inline-block”将使您的元素对齐。你可以使用这个或“float:right;”，但我更喜欢设置显示。

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

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

见jsfiddle。

于 2013-08-06T00:58:08.333 回答
0

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

CSS：

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

HTML：

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

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

于 2020-04-23T17:07:50.253 回答