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>に関連する質問は今、青のdivの少しが示されています。それはなぜですか、どうすれば修正できますか？
ありがとうございます！
あなたは、ブートストラップを使用し、各サイズのために、それぞれのクラスを適用されないため。 – Lahori
@Lahoriブートストラップを使用しない場合、どのように問題を解決できますか？ブートストラップCDNの部分を取り除いても問題は解決しますか？ –
@Nefersetiがそれをチェックするようになりました。背景色を削除する.div_input – Dhaarani