私の検索バーが同じ行で反応します

これは検索バーのhtmlコードです。私は小さなデバイスで縮小して反応させたいと思っています。可能であれば、検索バーと検索ボタンを縮小しながら同じページにしたいと思っています。私の検索バーが同じ行で反応します

<div class="main"> 
<input type="text" /> 
<input type="submit" value="Search"> 
</div>

CSSコード

input{ 
    border: none; 
    padding: 10px; 
    margin: 10px; 
    height: 40px; 
    width: 600px; 
    border:1px solid #eaeaea; 
    outline:none; 
} 

input:hover{ 
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9; 
} 

input:focus{ 
    border-color:#4d90fe; 
} 

input[type="submit"] { 
    border-radius: 2px; 
    background: #f2f2f2; 
    border: 1px solid #f2f2f2; 
    color: #757575; 
    cursor: default; 
    font-size: 14px; 
    font-weight: bold; 
    width: 100px; 
    padding: 0 16px; 
    height:40px; 
} 

input[type="submit"]:hover { 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
    background: #f8f8f8; 
    border: 1px solid #c6c6c6; 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
    color: #222; 
}

出典

2017-02-04 Opeyemi Odedeyi

あなたの目標は、応答することがある場合は、ハードコーディングされた幅を使用することはありません。使用率が – TheRealMrCrowley

うわー、それは簡単に問題を解決した、ありがとう。 –

私はのスタイリングを変更するメディアクエリを簡単な例を作った親

.main { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
input{ 
 
    border: none; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    height: 40px; 
 
    width: 600px; 
 
    border:1px solid #eaeaea; 
 
    outline:none; 
 
} 
 

 
input:hover{ 
 
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9; 
 
} 
 

 
input:focus{ 
 
    border-color:#4d90fe; 
 
} 
 

 
input[type="submit"] { 
 
    border-radius: 2px; 
 
    background: #f2f2f2; 
 
    border: 1px solid #f2f2f2; 
 
    color: #757575; 
 
    cursor: default; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    width: 100px; 
 
    padding: 0 16px; 
 
    height:40px; 
 
} 
 

 
input[type="submit"]:hover { 
 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
 
    background: #f8f8f8; 
 
    border: 1px solid #c6c6c6; 
 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
 
    color: #222; 
 
}

<div class="main"> 
 
<input type="text" /> 
 
<input type="submit" value="Search"> 
 
</div>

出典

2017-02-04 21:59:50

にdisplay: flex; align-items: center;を追加あなたの入力要素。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width:device-width, initial-scale = 1"> 
 
     <style> 
 
      
 
      body { 
 
       width: 100%; 
 
       height: 100%; 
 
       margin: 0; 
 
      } 
 

 
      .main { 
 
       width: 100%; 
 
       margin: 0 auto; 
 
      } 
 

 
      input[type="text"], input[type="submit"]{ 
 
       margin: 0; 
 
       padding: 10px 0; 
 
       display: inline-block; 
 
       border: 1px solid black; 
 
      } 
 

 
      input[type="text"]{ 
 
       width: 70%; 
 
      } 
 

 
      input[type="submit"]{ 
 
       width: 29%; 
 
      } 
 

 
      /** Tablet **/ 
 
      @media (max-width: 768px) { 
 
       input[type="text"]{ 
 
        width: 60%; 
 
       } 
 
       input[type="submit"]{ 
 
        width: 38%; 
 
       } 
 
      } 
 

 
      /** Mobile **/ 
 
      @media (max-width: 420px) { 
 
       input[type="text"]{ 
 
        width: 70%; 
 
       } 
 
       input[type="submit"]{ 
 
        width: 28%; 
 
       } 
 
      } 
 

 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="main"> 
 
      <input type="text" /> 
 
      <input type="submit" value="Search"> 
 
     </div> 
 
    </body> 
 
</html>

出典

2017-02-04 22:12:47 Win

私の検索バーが同じ行で反応します

答えて

関連する問題