按钮不在内容末尾答案

【问题标题】：Buttons not at end of content按钮不在内容末尾
【发布时间】：2018-07-13 05:12:10
【问题描述】：

我正在尝试解决此网站上的一个问题，该问题基本上将“立即购买”按钮置于内容下方。我的朋友问我是否可以提供帮助，我只是想知道这是否是标签的结构问题，还是需要大量的 css 工作？我将与下面有问题的元素的开发检查员一起发布一张照片。谢谢....任何帮助/指针表示赞赏。

如果您想查看问题，请链接到网站：

http://www.lovinghomecareservices.com/shop/

【问题讨论】：

标签： html css wordpress

【解决方案1】：

在您的foundation.css 上替换以下内容：

第 9374 行：

.post-column-outer .product-post-column .content-buy-now {
  background-color: #f3f3f3;
  padding-left: 15px;
  padding-right: 15px;
  margin: 15px;
  text-align: center;
  text-transform: uppercase;
  height: 50px;
  width: 99%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

与：

.post-column-outer .product-post-column .content-buy-now {
  background-color: #f3f3f3;
  padding-left: 15px;
  padding-right: 15px;
  margin: 15px;
  text-align: center;
  text-transform: uppercase;
  height: 50px;
  width: 99%;
  margin-left: auto;
  margin-right: auto;
}

另一方面，您有某种基于 JavaScript 的函数自动添加高度。

【讨论】：

谢谢，我会试试的。只有一个问题，你是怎么得出这个答案的？（所以我可以理解自己）。谢谢！
获取 google chrome，您可以将鼠标悬停在 Inspect Element 查看器中的元素上，然后简单地取消选中一些导致冲突的类。
谢谢，我会搜索 Chrome 开发工具的教程

【解决方案2】：

问题来自您的 CSS。你把这个：

.content-buy-now {
bottom: 0%;
margin: 15px;
}

删除它，您将解决您的问题。您还可以在浏览器上使用“检查元素”来检查您的 CSS 是否有问题。

【讨论】：

谢谢。您知道如何让按钮单击切换内容吗，比如说使用“阅读更多”按钮，单击时会在
标签中显示内容？
一点点 onclick function() 会帮助我认为，通过将显示样式更改为 block/none。