当我调整窗口的大小时，表中的文本会弹到新行。

Question

在css中，我有4列和1行宽度设置为100%的表。

当我调整窗口大小时，从屏幕到小文本，从最后一个单元格跳到新行。如果我改变缩放浏览器"Ctrl+mouse车轮上“，当文本到达窗口的边缘，它跳到下一行。

我注意到，如果我将表格宽度设置为1000 on，并调整窗口文本的大小，则可以保持在同一行上。

但我必须有100%宽的表格，因为我使用它作为标题，背景延伸到页面上。我想知道是否有CSS代码来阻止文本跳到窗口大小调整上？

<table width="100%" height="48px" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="auto" style="background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png); background-repeat: repeat-x;">&nbsp;</td>
        <td width="1000px" style="background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png); padding-top: 2px; overflow:hidden;">

                    <div class="inline login_box1" style="margin-left:112px;">
                        <input type="text" name="user_login" value="Username" />
                    </div>
                    <div class="inline login_box2" style="margin-left:26px;">
                        <input type="text" name="user_password_text" ialue="Password" />


                    </div>
                    <div class="inline login_box1" style="margin-left:50px;">
                        <input type="text" name="employer_login" value="Username"  />
                    </div>
                    <div class="inline login_box2" style="margin-left:26px;">
                        <input type="text" name="employer_password_text"  value="Password"  />


                    </div>
        </td>

        <td width="auto" style="background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png); background-repeat: repeat-x;">&nbsp;</td>
    </tr>
</table>

这是坏东西http://jsfiddle.net/LzTfF/2当你的鼠标轮子向上你放大和看到所有的盒子在同一行当你Ctrl +鼠标轮向下你缩放它并看到框跳转到下一行

现在，我将第一行表的宽度改为1000 go，而不是100%，现在，当您将输入框移到窗口后而不是跳转到下一行时，它工作得很好。然而，我需要蓝色的背景，以100%的拉伸在页面水平和设置固定的宽度不做它。如果我说将宽度设置为2000 in，它将在浏览器窗口中创建水平滚动条。

Answer 1

有几件事你可以做。最简单的方法是将元素包装起来，然后给包装器一个固定的宽度，这样包装器中的子元素就不会受到屏幕大小的影响。还可以使用媒体查询重新分配宽度。

<table id="table" >
<tr>
  <td class="auto_td" >&nbsp;</td>
  <td class="monkey_td">
    <div id="anchor">
      <div class="inline login_box1">
        <input type="text" name="user_login" value="Username" />
      </div>

      <div class="inline login_box2">
        <input type="text" name="user_password_text" ialue="Password" />
      </div>

      <div class="inline login_box1">
        <input type="text" name="employer_login" value="Username"  />
      </div>

      <div class="inline login_box2">
        <input type="text" name="employer_password_text"  value="Password"  />
      </div>
    </div>
  </td>
  <td class="auto_td" >&nbsp;</td>
</tr>
</table>

注意:您应该尽可能多地从html中删除内联css。它会变得杂乱无章，很难跟踪发生了什么

.monkey_td{
  width: 1000px;
  background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png);
  padding-top: 2px; 
  overflow:hidden;
}
.auto_td {
  width: auto;
  background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png);
  background-repeat: repeat-x;
}

#table {
  width:100%;
  height:48px;
  border: none;
  /* getts rid of cellpadding html attr and cellspacing html attr */
  border-spacing:0; 
  border-collapse:collapse;
}

/*this is the anchor that will keep her children from wondering when screen sizes change*/
#anchor {
  width:800px;
  margin: 0 auto;
}

.inline {
  display:inline;
  margin-left:0 auto;
}

希望有帮助:)