Question

我正试图让我的div（#signupform）在div的整个高度上显示浅灰色的背景颜色。

相反，它会在电子邮件输入字段结束时停止。

我怎样才能做到这一点？

实例：https://www.moneynest.co.uk/frustrating-newsletter-signup-box/

#signupform {
  background-color: lightgray;
}

#signupinput {
  display: block;
  text-align: center;
  max-width: 50%;
}

.email-sign-up-headline {
  padding-top: 10px!important;
}

#mcsignupbutton {
  width: 50%;
  display: block;
  text-align: center;
  margin-left: 25%;
}

#mcinputform {
  max-width: 50%;
  display: block;
  text-align: center;
}

<div id="signupform" style="background-color: lightgrey;">
  <center>
    <h3 class="email-sign-up-headline">Subscribe to the private Money Nest newsletter</h3>
  </center>
  <form action="https://moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&amp;id=33b662ad0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <center><input type="email" value="" name="EMAIL" class="email" id="mcinputform" placeholder="email address" required></center><input id="group_8" style="display: none;" checked="checked" name="group[12353][32]" type="checkbox" value="1" />
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
      <div class="clear">
        <center><input type="submit" value="Subscribe" name="subscribe" id="mcsignupbutton"></center>
      </div>
    </div>
  </form>
</div>

Answer 1

这是因为input[type="submit"]内div.clear向左浮动，.clear div没有任何东西可以清除浮动。要解决此问题，请将其添加到.clear div：

.clear::after {
    content: '';
    clear: both;
    display: block;
}

Answer 2

 .subscribe-header {
        color: #f8f8f8;
        text-align: center;
    }

    .subscribe-body {
        background-color: #ddd;
        padding: 15px;
        height: 210px;
        color:#808080;
    }

    .custom-tab-content {
        color: #000;
        font-family: 'Open Sans', sans-serif;
    }

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
<div class="col-md-12">
<div class="subscribe-header" style="margin-top:40px;">
        <div class="subscribe-body" align="center">
            <div class="subscribe-panel">
                <h3>Subscribe to the private Money Nest newsletter.</h3>
                <form action="" method="post">
                    <div class="col-md-offset-4 col-md-4">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
                                    <input type="text" class="form-control input-lg" name="email" id="email" placeholder="Enter your Email" />
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-warning btn-lg">Subscribe Now!</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>

div的背景颜色仅占50％

2 个答案: