无法摆脱隐藏的填充/空白区域以允许文本在按钮下包装

-1

我是一名初学者，希望能够通过html和css获得帮助，并且需要我遇到的一个小问题的帮助。在这个网站上，我正在重新设计，我有三个按钮形式（捐赠，查找和订阅）。我希望Donate和Find按钮下方的段落适合出现空白的地方。我已尝试所有的边距/填充/边框：0 auto;重置并没有任何工作。我有一种感觉，它与float和clear属性以及按钮所在的div有关（订阅按钮比其他两个按钮更大，因此可能是因果问题）。这里是我的网站的链接：http://me14ch.leedsnewmedia.net/slate/ 请使用右键单击/检查元素来查看代码。无法摆脱隐藏的填充/空白区域以允许文本在按钮下包装

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

来源

2015-05-06 Chloe Hammond

您好，欢迎StackOverflow上。请在此处粘贴相关代码，以便我们可以更快地提供帮助，并且链接也可以停止工作，并且稍后此问题将无意义。无论如何，这个问题是你的HTML结构。你有一个div里面的3个按钮，它们不允许下一个有文本的div，因为subscribe btn比较大。 –

正如@JoelAlmeida所说，为每个按钮创建单独的'div'，并相应地安排另一个'div'。 –

你可以通过添加一些额外的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="[email protected]" <="" 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%;}

来源

2015-05-06 13:52:55 Rotan075

非常感谢你！ –

很高兴我能帮忙！ :) – Rotan075

太棒了！非常感谢Pierezzz –

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

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

来源

2015-05-06 13:35:27 aphextwix

无法摆脱隐藏的填充/空白区域以允许文本在按钮下包装

回答

相关问题