Warum geht meine Submit-Schaltfläche unter das Eingabe-Textfeld, wenn das Browserfenster kleiner ist als die Gesamtbreite?

Warum geht meine Absenden-Schaltfläche unter das Eingabetextfeld, wenn das Browserfenster kleiner als die Gesamtbreite des Textfelds und der Schaltfläche selbst ist? Siehe Anhang unten.Warum geht meine Submit-Schaltfläche unter das Eingabe-Textfeld, wenn das Browserfenster kleiner ist als die Gesamtbreite?

.content { 
 
    height: auto; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    max-width: 1100px; 
 
} 
 

 
.content p { 
 
    text-align: center; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    height: auto; 
 
    margin-top: 80px; 
 
    background-color: #fff; 
 
} 
 

 
section h1 { 
 
    font-size: 34px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    margin-bottom: 10px; 
 
} 
 

 
.search-sec { 
 
    height: 147px; 
 
    margin-top: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: #ECEFF1; 
 
} 
 

 
.search-sec h1 { 
 
    padding: 0; 
 
    font-size: 18px; 
 
    text-align: left; 
 
    margin-bottom: 10px; 
 
    
 
} 
 

 
.content input[type=text] { 
 
    float: left; 
 
    outline: none; 
 
    height: 50px; 
 
    width: 770px; 
 
    align-self: center; 
 
    border: none; 
 
    padding: 0 0 0 10px; 
 
    box-sizing: border-box; 
 
    background-color: white; 
 
    border-top-left-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
} 
 

 
.content input[type=submit] { 
 
    float: right; 
 
    color: white; 
 
    height: 50px; 
 
    width: 100px; 
 
    border: none; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    background-color: #4285f4; 
 
    border-top-right-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
} 
 

 
.content input[type=submit]:hover { 
 
    cursor: pointer; 
 
    background-color: #2a75f3; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Web Hosting</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content=""> 
 
    <meta name="keywords" content=""> 
 
    <link rel="stylesheet" type="text/css" href="styles/main.css"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
<section class="search-sec"> 
 
     <div class="content"> 
 
      <h1>Your perfect domain starts here.</h1> 
 
      <form> 
 
       <input type="text" name="domain" placeholder="Search for a domain here."> 
 
       <input type="submit" value="Search"> 
 
      </form> 
 
     </div> 
 
    </section> 
 
    
 
</body> 
 
</html>

Ich würde die Taste jederzeit verfassen neben dem Eingabetextfeld zu bleiben. Wenn ich die Browser-Fenster in der Breite kleiner mache, möchte ich, dass das Eingabefeld mit der Schaltfläche "Senden" immer kleiner wird.

Danke

Quelle

2016-06-15 Richard Rodgers

Weil Sie eine feste Breite auf das Suchfeld 'Breite gesetzt: 770px;' – j08691

Eine Lösung, die die Breite Ihrer Eingabe in width: calc(100% - 100px);

Dieser Eingang Ihres Textes beschränken wird eingestellt würde sagen immer 100 Pixel auf weniger als 100%. Auf diese Weise bleibt Ihre Schaltfläche auch bei einem Fensterwechsel immer auf der rechten Seite.

See: https://jsfiddle.net/7ynetshe/

Quelle

2016-06-17 19:41:23

Warum geht meine Submit-Schaltfläche unter das Eingabe-Textfeld, wenn das Browserfenster kleiner ist als die Gesamtbreite?

Antwort

Verwandte Themen