Question

请访问link

您可以在链接中看到以下图片：

图像下方和上方有很多空白区域。我想删除这些差距，我想显示像link2

.check_delivery .actions {float: left;width: 25%;}
.check_delivery .f-right {margin-left: 0 !important;}
.check_delivery .f-right, .right {float: left !important;}
.check_delivery .button > span {background: #565656 none repeat scroll 0 0; width: 100% !important;}
.check_delivery .button span {padding: 3px;text-transform: capitalize !important;}
.check_delivery .item.last.odd { padding: 0;}

.check_delivery .search {margin: 0 auto !important; width: 100%;}

.check1 {
    float: left;
    text-align: center;
    width: 90%;
    font-size: 17px;
}

.ikon {
    position: relative;
    top:50px;
}

.check_delivery .block-subtitle {
  display: inline-block;
  float: left;
  font-family: Museo,Helvetica,arial,san-serif;
  font-size: 15px;
  margin-top: 6px;
  padding-left: 60px;
  width: 27%;
}
.check_delivery #estimate_postcode {

    float: left;
  margin-bottom: 0 !important;
  margin-left: 10px !important;
  margin-right: 10px;
  margin-top: 0 !important;
  padding: 0 0 0 10px !important;
  width: 70% !important;

}


.shipping-estimation-form {

    float: left;
  margin: 0 auto;
  padding: 0;
  width: 30%;
}

我试过这个：

.block block-shipping-estimate
{  position : relative; bottom:70px; }

但我认为它会对页面的其他部分产生影响。

任何人都可以帮我解决一些问题。

Answer 1

以下操作会从下方和顶部删除一些额外的空格。

从margin: 0 0 30px; padding: 10px 20px 20px;移除.block, .sidebar .box-reviews并向其提供position: relative;。

更改ikon css，如：

.ikon {
    position: absolute;
    top: 20px;
}

从<br>和.short-description移除.std。

Answer 2

为什么不在第二个链接中使用相同的DOM和CSS类？

<div class="block-content"> <div id="block_info">
    <img src="http://totaltoys.com/media/font-100.png" height="35" width="70"> 
    <strong><span>Check Delivery Availability</span></strong>       
    <input type="text" placeholder="Enter your PIN Code" class="input-text" maxlength="120" id="zipcode" size="20" name="zipcode" onkeypress="if (event.keyCode == 13) { return false;}">
    <button type="button" name="zip-check" title="Check" class="button1" id="zip-check"><span>CHECK</span></button>
    <div id="delivery-message"></div>
    <div id="delivery-html"></div>
    </div>  
</div>

另外我的建议是使用Angular指令：directives

在这种情况下，这是一个很好的解决方案，模板会在您的代码中重复多次。

Answer 3

这应该只是根据需要添加填充！

＆＃13;

#label{
    height: auto;
    float: left;
  
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
  
    background-image: url("https://cdn2.iconfinder.com/data/icons/simple-microphone-icon/512/Location_Icon-128.png");
    background-position: left top;
    background-size: 45px 40px;
    background-repeat: no-repeat;
}
#check{
    height: 40px;
    float: right;
}
#keyword-boxer{
    overflow: hidden;
    padding: 0px 2.5px;
}
#keyword{
    width: 98.75%;
    height: 36px;
  
    border: 1px solid #c0c0c0;
}

＆＃13;

<div>
    <label id="label">Check Availability</label>
    <button id="check">Check</button>
  
    <div id="keyword-boxer"><input type="text" id="keyword"/></div>
</div>

＆＃13;

Answer 4

尝试

    .block.block-shipping-estimate {
        margin: 0;
        padding: 0;
        clear: both;
        position:relative;
    }
    .ikon {
        position: absolute;
        top: 10px;
    }

Answer 5

请在下面更改css

.ikon {
  float: left;
  margin-top: 20px;
  /*position: relative;
  top: 50px;*/
}

.block, .sidebar .box-reviews {
  clear: both;
  float: left;
  margin: 0 0 10px;
  padding: 10px 20px 20px;
  position: relative;
  width: 96%;
}

.short-description .std ul { margin: 0; }

.check_delivery .block-subtitle {
   display: inline-block;
   float: left;
   font-family: Museo,Helvetica,arial,san-serif;
   font-size: 15px;
   margin-top: 6px;
   padding-left: 10px;
   width: 26%;
}

.product-view .add-to-box {
  margin-top: 0;
  overflow: visible;
  position: relative;
}

.div_link-cart .block-cart-top {
  clear: none;
  float: right;
  margin: 0;
  padding: 8px 0 0;
  width: auto;
}

Answer 6

为以下两个类设置position: relative，然后设置

margin:0px !important;
padding: 0px !important;
width : 100%;

以下是html代码：

.block.block-shipping-estimate {
    clear: both;
    margin: 0;
    padding: 0;
    position: relative;
}
.block, .sidebar .box-reviews {
    clear: both;
    float: left;
    margin:0px !important;
    padding: 0px !important;
    position: relative;
    width: 100%;
}

隐藏块下方和上方的空白区域

6 个答案: