Question

我几天来一直在研究这个问题，我似乎无法找到答案。

我正在使用Drupal 7，我正试图在首页上的一个块中使用E-junkie的购物车。弹出式叠加层等很好，但显然我的Drupal主题的CSS样式覆盖了我的购物，所以它出错了。

这是我正在处理的网站：http://eastwestcards.com - 在大视图购物车按钮下有一个添加到购物车按钮，您可以使用该按钮添加免费产品，以便能够看到什么我的意思是购物车出错了。我的结账按钮一直向左，如果你单击底部的空白区域，它实际上会发送给你结账，项目列表和其余的表没有边框或单元格间距/填充和其他一些东西。

现在这个网站是我的购物车应该如何：http://pixilate.com/fonts/gardenia-px - 只需点击产品的添加到购物车，你就会看到我的购物车和那些网站之间的差异。

我一直在寻求帮助，我已经尝试了一些建议给我，我试过从我的CSS样式表中豁免购物车的设计，我试过覆盖我的drupal主题的CSS等等，我已经甚至尝试使用Firefox的View Source Chart插件来尝试确定哪些标签等我应该尝试修复以便更改网站上购物车的外观。我使用了查看源图表插件，因为查看我的页面源通常不会显示购物车弹出的HTML代码，因为它是由我简单地放在我的网站上的e-junkie提供的javascript代码。我对这一切都相当新，但我真的尽力解决这个问题，希望有人能够帮助我！提前谢谢！

我做了这个改变“border-collapse：separate”和“border-spacing：2px”，我还在我的css样式表的末尾添加了这些东西，其中一些有用，有些则没有，但似乎现在看起来还不错：

#EJEJC_window table {
    background-color: white;
        !important;
}

div#EJEJC_iframeContent td

#EJEJC_iframeContent div {
    border-width: 3px;
    border-spacing: 20px;
    border-style: solid;
    border-color: green;
    border-collapse: collapse;
    background-color: white;
        !important;
}

#EJEJC_iframeContent th {
    border-width: 3px;
    border-spacing: 20px;
    border-style: solid;
    border-color: green;
    border-collapse: collapse;
    background-color: white;
        !important;
}

#ejejctable table {
font-family: arial;
font-size: 12pt;
background-color: white;
border-style: solid;
border-color: white;
padding: 4 px;
!important;
}

#ejejctable th {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}

#ejejctable td {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}

#ejejctable tr {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}

#ejejctable tbody {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}



#tdHeader { padding: 25px; !important; }

td#tdPmntOptions tr { float:right; !imporant; }

#tdPmntOptions tr { float:right; !imporant; }

img#btnEJ { float:right; !imporant; }

#btnEJ { float:right; !imporant; }

Answer 1

如果您查看此screenshot，您会看到问题所在。蓝色区域是您的链接标记，结帐按钮实际上只是在所有空白区域中嘎嘎作响的图像。单击白色区域会将您带到结帐处，因为就计算机而言，您实际上是在点击链接标签上（而不是人类用户希望点击的图像上）。

快速简便的解决方案是给链接标签“float：right”。除了定位元素之外，float属性还使容器围绕其内容“收缩包裹”。在这种情况下，您的链接标记将缩小到按钮图像的大小。您还可以为链接标记指定固定的宽度和高度，但浮动解决方案更灵活。

希望有所帮助！

编辑：刚发现element.style.css正在将标签设置为“display：block”。这是你的问题。将其更改为“display：inline”，它应该正常运行。

对于表格上的行间距，style.css设置border-collapse折叠并将border-spacing设置为0.将那些更改为“border-collapse：separate”和“border-spacing：2px”应修复它

需要覆盖主题CSS

1 个答案: