当屏幕很小时输入框没有填满整个空间

我正在练习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>

现在的一个问题，当我调整浏览器窗口最小，蓝格的点点所示。为什么是这样的，我该如何解决它？

在此先感谢！

来源

2016-09-24 ks_mani

因为你使用的引导，而不是将其相应的类相应的尺寸。 – Lahori

@Lahori如果我不使用Bootstrap，我该如何解决这个问题，即使移除Bootstrap CDN部分后，它仍然会持续存在？ –

@Neferseti现在检查它。删除背景色fo .div_input – Dhaarani

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>

来源

2016-09-24 10:10:21 Dhaarani

@Dharaani这个解决方案只会让div无形，但问题仍然存在。输入框不在中间，这意味着div仍然存在，输入框尚未占用div_input的整个高度。 –

我不明白你的问题。你有什么期望？我认为蓝线是问题，所以我必须删除它。现在你需要填充黄色空间的输入 – Dhaarani

蓝色div位于黄色div的中心，它位于红色div的中心。我希望输入框占据整个蓝色的div，这意味着输入框显示在黄色div的中心。当屏幕被调整到最小值时，输入框并未填满整个蓝色div，这使得看起来输入框不在黄色div的中心。那就是问题所在。如何解决它？ –

当屏幕很小时输入框没有填满整个空间

回答

相关问题