当浏览器窗口小于其总宽度时，为什么我的提交按钮位于输入文本框下方？答案

【问题标题】：Why is my submit button going under the input text box when browser window is smaller than it's total width?当浏览器窗口小于其总宽度时，为什么我的提交按钮位于输入文本框下方？
【发布时间】：2016-06-15 20:01:17
【问题描述】：

当浏览器窗口小于文本字段和按钮本身的总宽度时，为什么我的提交按钮位于输入文本字段下方？请参阅下面的附件。

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

我希望提交按钮始终位于输入文本字段旁边。如果我让浏览器窗口的宽度变小，我希望输入字段的大小随之减小，并且提交按钮始终在它旁边。

谢谢

【问题讨论】：

因为你在搜索栏设置了固定宽度width: 770px;

标签： html css input

【解决方案1】：

一种解决方案是将输入的宽度设置为width: calc(100% - 100px);

这将告诉您将文本输入限制为始终小于 100% 100 像素。这样，即使窗口发生变化，您的按钮也将始终保持在右侧。

见：https://jsfiddle.net/7ynetshe/

【讨论】：