Question

我在顶部菜单下方的页面顶部放置了一个大横幅，并在其上放置了一个链接。请查看以下链接。

http://dev.shy7lo.com/shoes.html?___store=en&___from_store=arabic

如果您在firebug或Chrome开发者工具中检查图像上方的间距，则a标记会增加大约17到20px的额外顶部空间。这很奇怪。任何人都可以建议为什么这个间距是如何以及如何删除它？

Answer 1

因为

 .main-container {
   padding: 30px 30px 0;
 }

你应该用

替换它

.main-container {
  padding: 0 30px; 
}

并在height:0px

中制作#header-search

@media only screen and (min-width: 771px)
#header-search {
    display: block;
    position: relative;
    top: -48px;
    float: right;
    width: 25%;
    /*height: 50px;*/
    height: 0;
    padding: 0;
}

Answer 2

您好现在定义此css并解决您的问题

.page-width{
position: relative;
}
#header-search {
    display: block;
    position: absolute;
    top: -47px;
    width: 25%;
    height: 40px;
    padding: 0;
    right: 0;
display: block;  // remove this line
position: relative; // remove this line
float: right;  // remove this line
}

Answer 3

从float:none; css。

中删除.col1-layout .col-main

.col1-layout .col-main {
    width: 100%;
    padding: 0;
    display: block;
}

并将css放在.category-image a

上

.category-image a {
    display: block;
    position:relative;
}

放置在锚标记中的图像上方的奇怪间距

3 个答案: