Javascript 在需要的窗口中滚动以访问标题中的文本框_Javascript_Jquery_Html_Css

Javascript 在需要的窗口中滚动以访问标题中的文本框

javascript jquery html css

Javascript 在需要的窗口中滚动以访问标题中的文本框,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的布局： 1.页面顶部的标题框 2.位于收割台右上角的集装箱箱 3.容器框顶部的两个文本框标题： | 问题是：当我更改窗口的大小时，文本框变得可访问，因为没有水平滚动条我在facebook上看到，当窗口点击文本框时，就会出现水平条我尝试过多个论坛，并在谷歌上搜索了很多。但我无法理解我所犯的错误。任何帮助都将不胜感激这是我的代码： <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

这是我的布局： 1.页面顶部的标题框 2.位于收割台右上角的集装箱箱 3.容器框顶部的两个文本框

标题： | 问题是：当我更改窗口的大小时，文本框变得可访问，因为没有水平滚动条

我在facebook上看到，当窗口点击文本框时，就会出现水平条

我尝试过多个论坛，并在谷歌上搜索了很多。但我无法理解我所犯的错误。任何帮助都将不胜感激

这是我的代码：

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head> 
    <title>TEST</title> 
    <link href="untitled3.css" media="all" rel="stylesheet" type="text/css" />
  </head> 
  <body> 
  <div id = "header">
         <div id = "containerframe">
          <table>
            <tr>
              <td> <input id="t1" name="t1" placeholder="" type="text" /> </td>
              <td> <input id="t2" name="t2" placeholder="" type="text" /> </td>
              <td> <input name="t3" type="submit" value="TEST" /> </td>
            </tr>
            <tr>
              <td> <input id="t4" name="test1" type="checkbox" value="1" /> </td>
              <td> <a href="#" id="test2"> Test data </a> </td>
            </tr>
          </table>
       </div>
  </div>
 </body>
 </html>

* {
margin: 0px;    
}

#header {
top: 0px;
left: 0px;
width: 100%;
height: 120px;
margin: 0px;
padding: 0px;
position: relative;
background: #eee;
z-index: 1;
}

#containerframe{
position: absolute;
top: 10px;
right: 20px;
width: 300px;
height: 60px;
}

您所面临的问题是您的集装箱框架的宽度小于

守则：-

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head> 
    <title>TEST</title> 
    <link href="untitled3.css" media="all" rel="stylesheet" type="text/css" />
  </head> 
  <body> 

  <style type="text/css">
    * {
margin: 0px;    
}

#header {
top: 0px;
left: 0px;
width: 100%;
height: 120px;
margin: 0px;
padding: 0px;
position: relative;
background: #eee;
z-index: 1;
}

#containerframe{
position: absolute;
top: 10px;
right: 20px;
width: 350px;
height: 60px;
}
  </style>

  <div id = "header">
         <div id = "containerframe">
          <table>
            <tr>
              <td> <input id="t1" name="t1" placeholder="" type="text" /> </td>
              <td> <input id="t2" name="t2" placeholder="" type="text" /> </td>
              <td> <input name="t3" type="submit" value="TEST" /> </td>
            </tr>
            <tr>
              <td> <input id="t4" name="test1" type="checkbox" value="1" /> </td>
              <td> <a href="#" id="test2"> Test data </a> </td>

            </tr>
          </table>
       </div>
  </div>
 </body>
 </html>

设置最小宽度：360px；在标题中

PS：尽量避免宽度：100%，因为它需要身体的宽度，如果你想使用它，你也应该使用最小宽度也

添加溢出：自动；到页眉CSS。@jeff实际上溢出给出了滚动条，只是它不是针对窗口本身，而是针对页眉单独。另外，调整大小的窗口没有通过文本栏来显示滚动条。它在这里似乎可以工作：@Bic Yes，当我从左侧而不是从右侧指定位置时，它可以工作。看起来是个不错的方式。但是在不同的系统上，px计数会有所不同吗？我把它指定为左：70%；单杠问题再次出现。@user2231191您可以使用类似于left:10%的值。70%将强制内容向右移动。根据您试图完成的内容，您可能需要更大的css更改。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head> 
    <title>TEST</title> 
    <link href="untitled3.css" media="all" rel="stylesheet" type="text/css" />
  </head> 
  <body> 

  <style type="text/css">
    * {
margin: 0px;    
}

#header {
top: 0px;
left: 0px;
width: 100%;
height: 120px;
margin: 0px;
padding: 0px;
position: relative;
background: #eee;
z-index: 1;
}

#containerframe{
position: absolute;
top: 10px;
right: 20px;
width: 350px;
height: 60px;
}
  </style>

  <div id = "header">
         <div id = "containerframe">
          <table>
            <tr>
              <td> <input id="t1" name="t1" placeholder="" type="text" /> </td>
              <td> <input id="t2" name="t2" placeholder="" type="text" /> </td>
              <td> <input name="t3" type="submit" value="TEST" /> </td>
            </tr>
            <tr>
              <td> <input id="t4" name="test1" type="checkbox" value="1" /> </td>
              <td> <a href="#" id="test2"> Test data </a> </td>

            </tr>
          </table>
       </div>
  </div>
 </body>
 </html>