machen meine Suchleiste reagiert auf der gleichen Linie

Dies ist der HTML-Code für meine Suchleiste. Ich möchte es reaktionsfähig machen, indem ich auf kleineren Geräten schrumpft, und wenn möglich, möchte ich, dass sowohl die Suchleiste als auch die Suchschaltfläche beim Schrumpfen auf derselben Seite liegen.machen meine Suchleiste reagiert auf der gleichen Linie

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

der CSS-Code

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; 
}

Quelle

2017-02-04 Opeyemi Odedeyi

nie hart codierte Breiten verwenden, wenn Ihr Ziel ansprechbar sein soll. Verwenden Sie Prozentsätze – TheRealMrCrowley

wow, das Problem leicht gelöst, danke. –

hinzufügen display: flex; align-items: center; dem Mutter

.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>

Quelle

2017-02-04 21:59:50

ich ein kurzes Beispiel mit Medien-Anfragen gemacht haben das Styling von verändern Ihre Eingabeelemente.

<!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>

Quelle

2017-02-04 22:12:47 Win

machen meine Suchleiste reagiert auf der gleichen Linie

Antwort

Verwandte Themen