HTML 文本 body 从 <li> 中的特定位置开始

Question

我正在为网站设计一个页面，其中包含三个不同的栏。我想知道如何使文本（在标题之后）恰好从特定的 px 点开始？比如，框开始前 200px 之类的东西。

这样我就可以让它与旁边的其他盒子对齐。

这是它目前的显示方式，我想学习如何在特定的、已定义的位置创建以 'The first interdisciplinary' 开头的句子，而不仅仅是添加空格.

结构：

 <li class="one_third borderedbox lt_bg first"><img src="images/demo/onec.jpg" alt="">
    <div class="pad30">
      <h2 class="uppercase nospace push15"><i>2014</i><br>I Was Born For This </h2><br><br>

      <font size="2"><p class="nospace" align="left">The first Interdisciplinary Sacred Music....

Answer 1

我可以想到两种方法来实现您的目标：

您可以将列的每个元素放在其自己的 div 标记中。使包含这些较小 divs "position: relative;" 和 "position: absolute;" 中每个较小 divs 的列

从那里，您可以为每个小 div 分配 "top: 200px;" 或您想要的任何内容。这是从屏幕顶部开始，向下工作。然后设置 "left: 50px;" 或您想要的距屏幕左侧的任何距离。

我并不是说这是最优雅的解决方案，但它将是一个精确的解决方案，因为您可以控制到组件中每个元素结束的像素。

有关该解决方案的更多信息，请参阅：www.w3schools.com/css/css_positioning.asp。
您可以选择为这些较小的 div（即 "height: 50px;"）创建特定的高度值，然后使用 "margin-top: 10px;"（数字由您决定）放置这些标签的起始位置参考上面的div。

看： www.w3schools.com/cssref/pr_margin.asp 了解更多关于此属性的信息。

希望这有帮助。

Answer 2

另一种实现此目的的简单方法是控制标题的高度和填充，而不是试图控制段落文本。

min-height 设置元素应具有的最小高度，以便其下的所有元素聚集在同一个 line-height 上。如果您对高度有一个大致的了解，则适当的解决方案。

    h2 {
       min-height: 50px;
       padding-bottom: 10px;
       }

Answer 3

您尝试过使用边距和填充吗？我建议您在 Google Chrome 中打开当前页面，然后使用开发人员工具（按 Ctrl+Shift+I）查看元素和代码。

在那里，您可以实时修改 CSS 并查看有效的方法。修补那里的边距和填充，我相信你能做到。

之后，您可以在原始 css 文件中进行更改。

HTML 文本 body 从 <li> 中的特定位置开始

HTML Having text body start at a specific position in <li>

html

css

html-lists