当我调整窗口大小时，表格中的文本 jups 到新行

>我在 css 中将 4 列和 1 行宽的表设置为 100%。

当我将窗口大小从屏幕重新调整为最后一个单元格的较小文本时，会跳转到新行。如果我在文本到达窗口边缘时在浏览器中更改放大"Ctrl+鼠标滚轮"，它会跳到下一行。

我注意到如果我将表格宽度设置为 1000px 并且调整窗口文本大小会保持在同一行就可以了。

但是我必须有表格 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 + 鼠标滚轮向上时，你缩小并在同一行上看到所有框，当你 Ctrl + 鼠标滚轮向下缩放它并看到框跳到下一行

现在这个 http://jsfiddle.net/9eYZx/1 我将第一行表格宽度更改为 1000px 而不是 100%，现在当您缩放时它可以正常工作 - 输入框位于窗口后面而不是跳转到下一行。但是我需要将蓝色背景水平拉伸到页面上 100%，并且设置固定宽度不起作用。如果我说将宽度设置为 2000px，它将在浏览器窗口中创建水平滚动条。

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

<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;
}

希望对:)有所帮助

相关内容

最新更新

热门标签：