0

以下はコードです：

このコードでは、最初のボックスが連続して来ていません。それ以外の場合、他の 2 つのボックスは問題ありません

<div class="foo">
  <div class="bar">1<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
  <div class="bar"><input type="submit"></div>
</div>
</br>

  <div class="bar">2<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
  <div class="bar"><input type="submit"></div>
</div>

</br>
  <div class="bar">3<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
  <div class="bar"><input type="submit"></div>
</div>

&CSS

.foo {
  display: table;
  width: 100%;
}

.bar {
  display: table-cell;
}

.bar:first-child, input[type="text"] {
  width: 20%;
}

input {
  box-sizing: border-box;
}

これについてできるだけ早く助けてください。

4

5 に答える 5

0

foo クラスを からdisplay:tableに変更display:inline

于 2013-10-20T05:41:29.837 に答える
0

理由もなく物事を過度に複雑にしていると思います。そして、HTML タグや CSS スタイルなどを (多少) めちゃくちゃにしてしまいました。
(私が信じている) あなたが求めているものは、(多くの方法の中で) 次のように実現できます。

HTML

<div class="foo">
    <div class="bar">
        1
        <input type="text" id="J1" class="textbox"
               autocomplete="off" autofocus />
    </div>
    <div class="bar"><input type="submit" /></div>
</div>
<br />
...

CSS

.foo {
    display: table;
    width: 100%;
}

.bar { display: table-cell; }

.bar:first-child { width: 20%; }

input[type="text"] { width: 80%; }

この短いデモも参照してください。

いくつかの追加のコメント:

  1. idDOM 内の複数の要素で同じものを使用しないでください。予期しない動作が発生する可能性が非常に高くなります。

  2. すべてのテキスト フィールドで使用するautofocusと、一番下のテキスト フィールドがフォーカスされます。

  3. submitボタンで実際に何かを実行したい場合は、 formJavaScript を使用してそれらを含めるかバインドすることを忘れないでください。

于 2013-10-20T05:42:48.870 に答える