在div中输入总是在一行中缩放

Question

我想更好地扩展我的输入字段。

当浏览器最大化时，它们看起来像这样：

在较小的屏幕上，它们看起来像这样，输入字段显示在底部，而它应该在右边：

我的代码：

.table-body {
  width: 100%;
  max-width: 952px;
  border-spacing: 0px;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.table-body div {
  padding-top: 3px;
  padding-bottom: 3px;
}
.table-field1 {
  text-align: center;
  float: left;
  padding-left: 11px;
  padding-right: 11px;
}
.table-field2 {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #8f268d;
  float: left;
  margin-top: -2px;
}
.table-field3 {
  color: #323232;
  display: inline;
  padding-left: 10px;
}
.table-field3 input {
  border: 1px solid #e4e4e4;
  width: 95%;
  max-width: 844px;
  color: #333333;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-top: 3px;
  border-radius: 7px;
  padding-left: 4px;
  behavior: url(/panel/css/pie/pie.php);
}

<div class="table-body">
  <div class="table-header">
    <div class="left">&nbsp;
      <input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')">
      <label for="checkbox_all" class="css-label">&nbsp;Zaznacz wszystkie</label>
    </div>
  </div>
  <div class="tabela_0">
    <div class="table-field1">
      <input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox">
      <label for="checkbox[438]" class="css-label"></label>
      <input type="hidden" name="tag[438]" value="test.com">
    </div>
    <div class="table-field2">
      <div>USUŃ</div>
    </div>
    <div class="table-field3">
      <input type="text" name="entry" value="test.com">
    </div>
  </div>
</div>

<div class="table-end"></div>

Answer 1

获取小提琴：https://jsfiddle.net/z1o0fp1n/

我使用了表：

     <table><tr><td>
            <div class="table-field2">
                <div>USUŃ</div>
            </div>
         </td><td>
            <div class="table-field3">
                <input type="text" name="entry" value="test.com">
            </div>
         </td></tr>
     </table>

你也可以使用float：

 <div class="table-field3" style='float:left;display:block'>
            <input type="text" name="entry" value="test.com">
 </div>

Answer 2

如果您可以使用flexbox来支持您的项目，请尝试以下操作：

＆＃13;

＆＃13;

.table-body {
  width: 100%;
  max-width: 952px;
  border-spacing: 0px;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.tabela_0 {
  display:flex;
}
.table-body div {
  padding-top: 3px;
  padding-bottom: 3px;
}
.table-field1 {
  text-align: center;
  padding-left: 11px;
  padding-right: 11px;
}
.table-field2 {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #8f268d;
  margin-top: -2px;
}
.table-field3 {
  color: #323232;
  padding-left: 10px;
  flex-grow:1;
}
.table-field3 input {
  border: 1px solid #e4e4e4;
  width: 95%;
  max-width: 844px;
  color: #333333;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-top: 3px;
  border-radius: 7px;
  padding-left: 4px;
  behavior: url(/panel/css/pie/pie.php);
}

＆＃13;

<div class="table-body">
  <div class="table-header">
    <div class="left">&nbsp;
      <input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')">
      <label for="checkbox_all" class="css-label">&nbsp;Zaznacz wszystkie</label>
    </div>
  </div>
  <div class="tabela_0">
    <div class="table-field1">
      <input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox">
      <label for="checkbox[438]" class="css-label"></label>
      <input type="hidden" name="tag[438]" value="test.com">
    </div>
    <div class="table-field2">
      <div>USUŃ</div>
    </div>
    <div class="table-field3">
      <input type="text" name="entry" value="test.com">
    </div>
  </div>
</div>

<div class="table-end"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Flexbox的？

.table-body {
  width: 100%;
  max-width: 952px;
  border-spacing: 0;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}

.table-body div {
  padding: 3px;
}

.table-field2 {
  font-size: 15px;
  font-family: Roboto,sans-serif;
  font-weight: 400;
  color: #8f268d;
}

.table-field3 input {
  border: 1px solid #e4e4e4;
  color: #333;
  font-family: Roboto,sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-top: 3px;
  border-radius: 7px;
  padding-left: 4px;
  behavior: url(/panel/css/pie/pie.php);
  width: 95%;
}

.tabela_0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 3px;
}

.table-field3 {
  width: 100%;
}

<div class="table-body">
<div class="table-header">
    <div class="left">&nbsp;<input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')"><label for="checkbox_all" class="css-label">&nbsp;Zaznacz wszystkie</label></div>
</div>
    <div class="tabela_0"><div class="table-field1"><input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox"><label for="checkbox[438]" class="css-label"></label><input type="hidden" name="tag[438]" value="test.com"></div><div class="table-field2"><div>USUŃ</div></div><div class="table-field3"><input type="text" name="entry" value="test.com"></div></div>
</div>