Question

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

显示为块，内联或内联块与左浮动不会做任何事情，这似乎是显而易见的解决方案。

我不知道为什么但是只要我添加了邮件黑猩猩代码，输入形式保持不变，但按钮显示在下一行并且比它更宽。我已经设置了id和类来遵守内部样式表而不是邮寄黑猩猩。

为什么这个元素不遵循基本样式？或者我错过了一些基本的东西？

感谢任何帮助，谢谢。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

规则#f-em form input适用于按钮和输入。宽度均为80％。

您的按钮（<input type="submit" ...>）和文字字段（<input type="text">）都符合#f-em

的规则width:80%.表单输入

您的按钮也符合您的#newsletter-button规则，但这不如上述规则那么具体，因此可以覆盖。

Answer 2

你的css中的这个规则#f-em form input并不是特定于它适用于所有输入标记元素，仍然是表单以及＃f-em。您可以尝试使其更具体。

要将表格左侧的按钮对齐，您可以尝试使用以下代码对齐它。

    form { 
    margin:0 auto;
    width: 80%;
    height: 30px;
    background: pink;
    overflow: hidden;
    }
    input{ 
    float:left; 
    width:20%;
    }

为什么按钮元素不显示在输入表单旁边？

2 个答案: