0

我是 HTML 和 CSS 的新手。我正在建立一个网站，但感觉我并没有尽可能多地控制它。控制项目/元素/对象的定位和放置。

示例图像

问题：如何使用 CSS 调整页面上特定元素/项目/内容的位置。在这种情况下，“水平规则”。如何将“水平规则”移动/推到更靠近其上方的文本。5 星和文字。如果我想如何在标题和图像之间放置更多空间？

例如。在 HTML 中，我有一个“水平规则”，将上方的图像和文本与下方的文本分开。在此处查看此图像。

这张图片中的“水平规则”在一个 div 中。5 星评级系统及其文本位于 div 中。图片在 div 中，标题（图片上方的所有内容）在 div 中。最后，这 4 个 div 位于容器 div 中。如何在不影响页面上其他任何内容的情况下将“水平规则”推到更接近 5 星和文字的位置？

对于我的代码，请在下面的评论中查看我的链接。由于声誉问题，我无法发布超过 2 个链接。谢谢。

您的回答将不胜感激。提前致谢！

4

2 回答 2

0

一个简单的方法是使用开发人员工具，例如FireBug来确定您需要在 CSS 中进行哪些更改以使事物更接近或更远。它允许您检查页面元素，不仅可以查看它们的布局值，还可以编辑它们。

为确保您的<hr>标签占用最小空间，使它们尽可能靠近其他元素，您可以将它们的边距和内边距设置为 0。

hr{padding:0;margin:0;}

下一步是设置<hr>标签上方和下方元素的边距和填充。

这是一个<hr>通过更改标签的填充/边距来显示差异的示例。

只需设置边距，因为默认情况下填充已设置为零。在此处<hr>查看标签的默认值。

希望这可以帮助

于 2013-10-01T01:54:12.943 回答
0

您可以尝试以下方法：

hr { width: 100%; height: 1px; color: #CCC; margin-top: -2px; }

不确定使用负边距是否有任何风险......我当然不是 CSS 专家。

于 2013-10-01T01:22:51.123 回答