Question

我有一个图像包装器，我想在鼠标悬停时用黑色背景显示一个按钮。我试着这样做，但它在底部的容器中添加了一个空白区域，我不知道为什么。

HTML：

<div class="tour-box-wrapper" style="margin-right:45px">
    <div class="image-wrapper">
          <a href="#" class="grayscale"><img src="http://static.teambuy.ca/deal/540x254/other/28165573-2014-03-03-28144457-boxhouse-10b.jpg" /></a> 
          <a><button type="button" class="view-deal-button"  >View Deal</button></a>
    </div>
</div>

CSS：

.tour-box-wrapper
{
width:45%;
border: 1px solid #BBB;
padding:2px;
background-color: #E7E7E7;
background-image: -webkit-gradient(linear,left top,left    bottom,from(#FFFFFF),to(#E7E7E7));
background-image: -webkit-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -moz-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -ms-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -o-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: linear-gradient(to bottom,#FFFFFF,#E7E7E7);
float:left;
display:block;
}

.image-wrapper 
{
border:1px solid #E0E0E0;
padding:2px;
display: block;

}

.image-wrapper img
{   
width:100%;
}

a.grayscale {
display: inline-block;
background: black;
padding: 0;
}

a.grayscale img {
display: block;
}

a.grayscale:hover img
{
opacity: 0.5;
}
.view-deal-button 
{
border: none;
text-align: center;
border-radius: 6px;
text-align: center;
z-index: 999;
position: relative;
left: 343px;
bottom: 36px;
background-color: #CD277B;
padding:6px;
 }

.view-deal-button a
{
color:white;
font-size:14px;
}

注意忽略我知道将用于在鼠标输入上显示按钮的Javascript，但我只是想在图像下方修复这个额外的空间，并希望将按钮带到图像的右下角。

JSFiddle

Answer 1

您的按钮位置为“亲戚”。是什么创造了底部的空间。它的质量＆＃39;正在影响其父容器。如果你不希望它有任何“质量”，请尝试定位它绝对的＆＃39;绝对＆＃39;相对于父母。

Answer 2

这是因为相对定位和底部属性。

 .view-deal-button {
    background-color: #CD277B;
    border: medium none;
    border-radius: 6px;
    bottom: 36px;
    left: 343px;
    padding: 6px;
    position: relative;
    text-align: center;
    z-index: 999;
}

向右移动按钮并在图像下方。

.view-deal-button {
  border: none;
  border-radius: 6px;
  text-align: center;
  float: right;
  margin: 5px 0;
  background-color: #CD277B;
  padding:6px;
}

http://jsfiddle.net/b4r3p/3/

Answer 3

尝试使用此css按钮

.view-deal-button 
{
    border: none;
    text-align: center;
    border-radius: 6px;
    text-align: center;
    z-index: 999;
    position: relative;
    left: 343px;
    bottom: 36px;
    background-color: #CD277B;
    padding:6px;
    margin: 0% 0% 0% -80%;
}

检查此fiddle

添加按钮后包装尺寸会增加

3 个答案: