当屏幕很小时输入框没有填满整个空间
我正在练习HTML和CSS。我必须与以下代码 -当屏幕很小时输入框没有填满整个空间
.outer_class{
\t \t position: absolute;
\t \t width: 50%;
\t \t height: 30%;
\t \t top: 35%;
\t \t left: 25%;
\t \t background-color: red;
\t }
\t .inner_class{
\t \t position: relative;
\t \t width: 50%;
\t \t height: 50%;
\t \t top: 25%;
\t \t left: 25%;
\t \t background-color: yellow;
\t }
\t .div_input{
\t \t position: relative;
\t \t width: 70%;
\t \t height: 50%;
\t \t top: 25%;
\t \t left: 15%;
\t \t background-color: blue;
\t }
\t input[type="text"]{
\t \t box-sizing: border-box;
\t \t width: 100%;
\t \t height: 100%;
\t }<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <title>Align_Textbox_To_Div_Center</title>
\t <!--++++++++++++++++++++++Bootstrap CDN(Content Delivery Network)++++++++++++++++++++++++++++++-->
\t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
\t <div class="outer_class">
\t \t <div class="inner_class">
\t \t \t <div class="div_input">
\t \t \t \t <input type="text" name="username">
\t \t \t </div>
\t \t </div>
\t </div>
</body>
</html>现在的一个问题，当我调整浏览器窗口最小，蓝格的点点所示。为什么是这样的，我该如何解决它？
在此先感谢！
Add
input [type =“text”] { position：absolute; border：none; }
.outer_class{
\t \t position: absolute;
\t \t width: 50%;
\t \t height: 30%;
\t \t top: 35%;
\t \t left: 25%;
\t \t background-color: red;
\t }
\t .inner_class{
\t \t position: relative;
\t \t width: 50%;
\t \t height: 50%;
\t \t top: 25%;
\t \t left: 25%;
\t \t background-color: yellow;
\t }
\t .div_input{
\t \t position: relative;
\t \t width: 70%;
\t \t height: 50%;
\t \t top: 25%;
\t \t left: 15%;
background:blue;
\t }
\t input[type="text"]{
\t \t box-sizing: border-box;
\t \t width: 100%;
\t \t height: 100%;
position:absolute;
border:none;
\t }<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <title>Align_Textbox_To_Div_Center</title>
\t <!--++++++++++++++++++++++Bootstrap CDN(Content Delivery Network)++++++++++++++++++++++++++++++-->
\t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
\t <div class="outer_class">
\t \t <div class="inner_class">
\t \t \t <div class="div_input">
\t \t \t \t <input type="text" name="username">
\t \t \t </div>
\t \t </div>
\t </div>
</body>
</html>@Dharaani这个解决方案只会让div无形，但问题仍然存在。输入框不在中间，这意味着div仍然存在，输入框尚未占用div_input的整个高度。 –
我不明白你的问题。你有什么期望？我认为蓝线是问题，所以我必须删除它。现在你需要填充黄色空间的输入 – Dhaarani
蓝色div位于黄色div的中心，它位于红色div的中心。 我希望输入框占据整个蓝色的div，这意味着输入框显示在黄色div的中心。 当屏幕被调整到最小值时，输入框并未填满整个蓝色div，这使得看起来输入框不在黄色div的中心。那就是问题所在。如何解决它？ –
因为你使用的引导，而不是将其相应的类相应的尺寸。 – Lahori
@Lahori如果我不使用Bootstrap，我该如何解决这个问题，即使移除Bootstrap CDN部分后，它仍然会持续存在？ –
@Neferseti现在检查它。删除背景色fo .div_input – Dhaarani