Html 100%宽度布局在流体布局中工作不正常

第一对不起，如果标题不是100%在桥上，我真的不知道如何撰写它

无论如何，这里有一个100%宽度布局的简单问题。我有一个表单在流体容器中，它有-1个输入，1个选择，1个按钮，它们都是对齐的内联（水平）

当我最小化窗口时，按钮和选择列表会向下移动。我不想那样

这里是一个例子，在小提琴你可以尽量减少html部分，你会看到问题

如何使它们在一条线上而不向下移动

.main {
    max-width: 1200px;
    margin: 0px auto;
    background-color: #eee;
    line-height: 50px;
    padding: 10px;
}
form {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    display: block;
}
.clear {clear: both;}
input, select {
    float: left;
    height: 50px !important;
    padding: 0 10px;
    width: 66% !important;
    border: 1px solid #d6d8db;
    margin-right:  20px;
}
input.button {
    height: 54px !important;
    padding: 0 10px;
    margin-top: -1px !important;
    width: 125px !important;
    border: 1px solid #d6d8db !important;
    background: #333;
    cursor: pointer;
    color: #fff;
}
select {
    width: 200px !important;
    height: 52px !important;
}

html:

选择

对表单、输入和选择选择器进行一些CSS调整应该可以做到这一点

form {
    padding: 0;
    margin: 0;
    display: block;
    white-space: nowrap;
}
input, select {
    display: inline-block;
    height: 50px;
    padding: 0 10px;
    width: 66%;
    border: 1px solid #d6d8db;
    margin-right:  20px;
}

---

旁注：除非你真的需要它们，否则所有这些

！重要提示

声明最终会带来比解决问题更多的麻烦。我会避开

！重要信息

尽可能多。

对表单、输入和选择选择器进行一些CSS调整应该可以达到这个目的

form {
    padding: 0;
    margin: 0;
    display: block;
    white-space: nowrap;
}
input, select {
    display: inline-block;
    height: 50px;
    padding: 0 10px;
    width: 66%;
    border: 1px solid #d6d8db;
    margin-right:  20px;
}

---

旁注：除非你真的需要它们，否则所有这些

！重要提示

声明最终会带来比解决问题更多的麻烦。我会避开

！重要信息

尽可能多。

您好，谢谢您的回答，但是您能在演示中看到它从主分区中流出的最小值。通常，它应该留在容器中@安德鲁斯，这是另一回事，主要是因为你的混合测量。有些元素的宽度为%，有些元素的宽度为硬编码宽度。如果你想整个事情是动态的，你想使用硬编码的宽度，你需要调整。。。。这里更新了fiddle：main div是MAX-WIDTH，这意味着在我的显示器上它可以是最大的，但在你的显示器上，如果分辨率小于1200px宽度，则会更小。因此，从现在开始，您了解到输入的宽度为%，这必须类似于ruber/silicon/flexible:）当窗口变小时，选择和按钮必须是内联的，只有输入[文本]必须变小。请参见：如果您使用%作为宽度并调整表单CSS，一切都很好。您甚至不需要

.main

div。固定的宽度才是问题所在。它们打破了流体设计，因为55%（文本输入）+200px+125px通常比窗口宽。您可以尝试设置

.main

的最小宽度或选择和按钮的最小宽度。您好，谢谢您的回答，但是您可以在演示中看到它从主分区出来时的最小宽度。正常情况下，它应该留在容器中@安德鲁斯，这是另一回事，主要是因为你的混合测量。有些元素的宽度为%，有些元素的宽度为硬编码宽度。如果你想整个事情是动态的，你想使用硬编码的宽度，你需要调整。。。。这里更新了fiddle：main div是MAX-WIDTH，这意味着在我的显示器上它可以是最大的，但在你的显示器上，如果分辨率小于1200px宽度，则会更小。因此，从现在开始，您了解到输入的宽度为%，这必须类似于ruber/silicon/flexible:）当窗口变小时，选择和按钮必须是内联的，只有输入[文本]必须变小。请参见：如果您使用%作为宽度并调整表单CSS，一切都很好。您甚至不需要

.main

div。固定的宽度才是问题所在。它们打破了流体设计，因为55%（文本输入）+200px+125px通常比窗口宽。您可以尝试为

.main

设置最小宽度，或为“选择并”按钮设置最小宽度。