0
我正在練習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>現在的一個問題，當我調整瀏覽器窗口最小，藍格的點點所示。爲什麼是這樣的，我該如何解決它？
在此先感謝！
因爲你使用的引導，而不是將其相應的類相應的尺寸。 – Lahori
@Lahori如果我不使用Bootstrap，我該如何解決這個問題，即使移除Bootstrap CDN部分後，它仍然會持續存在？ –
@Neferseti現在檢查它。刪除背景色fo .div_input – Dhaarani