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

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

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

标签

于 2013-10-20T05:20:52.097 回答
0

检查这个小提琴

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>
于 2013-10-20T05:27:11.173 回答
0

只需将widthfrom更改20px为 29.5%

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

演示：http: //jsfiddle.net/LrshX/

于 2013-10-20T05:28:54.020 回答
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. 不要id在 DOM 中的多个元素上使用相同的内容，否则您很可能会遇到意外行为。

  2. 如果您autofocus在所有文本字段上使用，则 ladt 将获得焦点。

  3. 如果您希望您的submit按钮实际执行某些操作，请不要忘记将它们包含在form或使用 JavaScript 绑定它们。

于 2013-10-20T05:42:48.870 回答