Question

以下是代码：

在此代码中，第一个框不会连续出现，否则其他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;
}

尽快帮助解决这个问题。

Answer 1

使用表而不是div。给出每个输入

    <td> <input type ="text"\> <\td>

标签

Answer 2

选中此Fiddle

CSS：

.foo {
  display: block;
  width: 100%;
}
.row
{
    display:block;
}

.bar {
  display: inline-block;
}

input {
  box-sizing: border-box;
}

HTML：

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

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

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

Answer 3

只需将width从20px更改为29.5%

即可

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

样本：http://jsfiddle.net/LrshX/

Answer 4

将foo类从display:table更改为display:inline

Answer 5

我认为你无缘无故地过度复杂化了。你搞砸了你的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%; }

另请参阅此 short demo 。

其他一些评论：

不要在DOM中的多个元素上使用相同的id，否则您很可能会遇到意外行为。
如果您在所有文字字段上使用autofocus，那么其中一个将获得焦点。
如果您希望submit按钮实际执行某些操作，请不要忘记将它们包含在form中或使用JavaScript绑定它们。

如何显示3个带文字和输入的输入框连续提交按钮

5 个答案: