无法摆脱不可见的填充/白色 space 以允许文本在按钮下换行

Question

我是 html 和 css 的初学者，需要帮助解决我面临的一个小问题。在这个我正在重新设计的网站上，我有三个按钮表单（捐赠、查找和订阅）。我希望捐赠和查找按钮下方的段落适合白色 space 出现的位置。我已经尝试了所有 margin/padding/border:0 auto;重置，没有任何工作。我感觉它与 float 和 clear 属性以及按钮所在的 div 有关（订阅按钮比其他两个按钮大，因此可能是因果问题）。这是我网站的 link：http://me14ch.leedsnewmedia.net/slate/ 请使用右click/inspect元素查看代码。

非常感谢任何帮助，谢谢！

Answer 1

您需要从 .section group 中取出 subscribe to our blog 元素。

此元素的高度在 Donate 和 Find 按钮下方创建您要删除的白色 space。

Answer 2

您可以添加一些额外的 div 并修复一些 CSS。

看看我是如何用这个codepen做到的：http://codepen.io/anon/pen/RPWybE

HTML:

<div class="section group">
    <div class="subgroup1">
        <div class="col span_1_of_3">
            <a href="http://me14ch.leedsnewmedia.net/slate/shop.html" class="button"> Donate <p> Furniture and Electricals </p> </a>
        </div>
        <div class="col span_1_of_3">
            <a href="http://me14ch.leedsnewmedia.net/slate/shop.html" class="button"> Find <p> your nearest store </p> </a>
        </div>
      <p>
      Slate was set up to run environmentally friendly projects for the benefit of the local community, and offer work opportunities to people with learning difficulties. Our charity is divided into two main sections of which are the two Feel Good Furniture Shops and the Feel Good Cafe. Please browse our website to find out more about us, donate your unwanted furniture or take a look at our stock catalogue to redecorate your living space!
      </p>
    </div>
    <div class="subgroup2">
        <div class="col span_1_of_3">
            <form action="" method="post" class="subscribe-form">
                <h4> Subscribe to our blog! </h4>
                <label>
                    <span> Name </span>
                    <input id="name" type="text" name="name" placeholder="full" <="" label="">

                    <label>
                        <span> Email </span>
                        <input id="email" type="email" name="email" placeholder="example@example.co.uk" <="" label="">

                        <span>&nbsp;</span>
                        <input type="button" class="button4" value="Send">

                    </label>
                </label>
            </form>
        </div>

    </div>

CSS:

/* NEW CSS */
.group{width:100%;}
.subgroup1{ 
    height:200px;
    width: 64.54%;
    float:left;
}
.subgroup1 .col{width:48%;}
.subgroup2{
    float:left;
    width:25%;
}
.subgroup2 .col{width:100%;}

无法摆脱不可见的填充/白色 space 以允许文本在按钮下换行

Can't get rid of invisible padding / white space to allow text to wrap under button

html

css

forms

whitespace

button