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

ここにいくつかの奇妙な解決策があります。なぜこれが機能するのか、正直なところよくわかりません。私は古いコードペンでそれを持っていました。幸運を！

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

「脇」の幅をピクセルに、スパンをパーセントに設定できますが、これまで見てきたように、問題が発生します。両方をパーセントに設定する方が簡単です。また、「インラインブロック」は要素を一列に並べます。これまたは「float: right;」を使用できますが、表示を設定することをお勧めします。

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

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

jsfiddleを参照してください。

于 2013-08-06T00:58:08.333 に答える