ブラウザウィンドウがその合計幅よりも小さい場合、送信ボタンが入力テキストボックスの下に移動するのはなぜですか？

ブラウザウィンドウがテキストフィールドとボタン自体の合計幅よりも小さい場合、なぜ送信ボタンが入力テキストフィールドの下に移動するのですか？以下の添付を参照してください。ブラウザウィンドウがその合計幅よりも小さい場合、送信ボタンが入力テキストボックスの下に移動するのはなぜですか？

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

私はすべての回で次の入力テキストフィールドに滞在する送信ボタンをしたいと思います。ブラウザウィンドウの幅を小さくすると、入力フィールドのサイズが常に小さくなり、送信ボタンが常に横に表示されます。

は

出典

2016-06-15 Richard Rodgers

検索フィールド '幅に一定の幅を設定しているので：770px;' – j08691