屏幕上的Flex项目不会像兄弟项目一样重新缩小

时间:2016-06-18 21:52:19

标签: html css css3 flexbox

我有三个输入class SimpleClass(se: SimpleEnum) extends Ordered[SimpleEnum] { override def compare(that: SimpleEnum): Int = this.se.[here i want to get instance of SimpleEnum, just like i used to do in java, but unfortunately it's not possible] } email& text submit中包含div display: flex,以便所有输入显示在一行中。

我使用flex属性为这些元素占用可用空间,flex: 2用于email& textflex: 1 submit。{/ p>

然而,当我缩小浏览器窗口时,只有email& text正在调整大小。 submit元素以某种方式固定在某个固定宽度上。 flex属性似乎不起作用。

CODE:



.display-forms {
  display: flex;
  margin: 50px 0;
}
.input-field {
  position: relative;
  flex: 2;
}
input {
  display: block;
  height: 60px;
  width: 100%;
  padding: 0 10px;
  font-size: 18px;
}
input[type="submit"] {
  flex: 1;
  background: white;
  color: #ba9e44;
  font-size: 24px;
  padding: 0 15px;
}

<div class="display-forms">
  <div class="input-field">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="input-field">
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
  </div>
  <input type="submit" value="Subscribe" name="subscribe" id="mc-subscribe" class="button">
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案