0

我有 4 列和 1 行宽度的表在 css 中设置为 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我将第一行表的宽度更改为 1000 像素而不是 100%，现在缩放时它工作正常 - 输入框位于窗口后面而不是跳到下一行。但是我需要蓝色背景在页面上水平拉伸 100% 并且设置固定宽度不会这样做。如果我说将宽度设置为 2000px，它将在浏览器窗口中创建水平滚动条。

4

1 回答 1

0

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

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

希望有帮助:)

于 2013-09-11T09:26:01.357 回答