桌子裏面的文本到新行當我調整窗口大小時

Question

我有4列和1行寬設置爲100％在CSS中的表。

當我從屏幕重新調整窗口大小到最後一個單元格的較小文本跳轉到新行。如果我在文本到達窗口邊緣時更改瀏覽器「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，它會在瀏覽器窗口中創建水平滾動條。

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

希望幫助:)