这是我的布局: 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;
}
最佳答案
您遇到的问题是您的 containerframe 的宽度较小...
代码:-
<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>
关于javascript - 在需要访问标题中的文本框的窗口中滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21668851/