Question

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

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

Answer 1

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

此元素的高度创建了您想要在Donate和Find按钮下方删除的空白区域。

Answer 2

你可以通过添加一些额外的div来修复一些CSS。

看看我是如何用这个代码笔做到的：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%;}

无法摆脱不可见的填充/空白区域，以允许文本在按钮下包裹

2 个答案: