html - 为什么按钮元素没有显示在输入表单旁边？

Question

我遇到了一些我通常不会遇到的基本定位问题。我只希望订阅按钮的宽度达到应有的 20%，并且位于输入表单的左侧。

显示为 block 、内联或带左浮动的内联 block 什么都不做，这似乎是显而易见的解决方案。

我不确定为什么，但是一旦我添加了邮件黑猩猩代码，输入表单就保持不变，但按钮显示在下面的下一行并且比原来更宽。我已将 ID 和类设置为遵循内部样式表而不是邮件黑猩猩的样式表。

为什么这个元素不遵循基本样式？还是我缺少一些基本的东西？

感谢任何帮助，谢谢。

#newsletter {
  background: lightblue;
  width: 56%;
  height: 100%;
  padding: 0 0 0 25px;
  display: table-cell;
}

.f1 {
  display: block;
  text-transform: uppercase;
  color: darkblue;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 15px;
}

.f2 {}

#f-sm,
#f-em {
  padding-top: 15px;
  display: block;
}

#f-em form input {
  margin: 0;
  width: 80%;
  height: 30px;
  background: pink;
  float: left;
}

#newsletter-button {
  width: 20%;
  height: 30px;
  float: left;
  background: lightblue;
}

<div id="newsletter">
  <span class="f1">Newsletter Signup</span>
  <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare...</span>
  <span id="f-em">
<form action="action_here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
</span>
  <div class="clear"></div>
</div>

Answer 1

规则#f-em form input适用于按钮和输入。给两者 80% 的宽度。

您的按钮 ( <input type="submit" ...> ) 和您的文本字段 ( <input type="text"> ) 都符合您的规则 #f-em表单输入有 width:80%.

您的按钮也与您的 #newsletter-button 匹配规则，但这不如上述规则具体，因此被覆盖。