Question

我正在尝试通过使用CSS将10px的左边距分配给p，将每个段落从左边向左移动10个像素。但是，它们似乎没有更新

CSS：

.container {
  width: 680px;
  height: 900px;
  background-image: url("images/bgcontainer.jpg");
  overflow: auto;
  left: 10%;
  right: 10%;
  }

p {
  margin-left: 10px;
}

我要移动的段落HTML：

<p align="left">
  <h5 align="left" width="650px">Lorem ipsum dolor sit amet,
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    <a href="">exercitation ullamco</a>
    laboris nisi ut aliquip ex ea.
  </h5>
</p>

我只希望应用CSS编写的段落的分配属性并实际移动这些段落。

Answer 1

删除p标签内的h5标签。这样，它将始终是无效的HTML。结构可能像：

<h1>Headline</h1>
<h2>Subheadline</h2>
<p>Some lorem stuff</p>
<h3>Subsubheadline</h3>
<p>More lorem stuff</p>

以此类推。

Answer 2

您的HTML结构无效。在段落元素内使用标题元素是不可能的。因为浏览器在“看到” p之类的heading标签时会自动关闭<h5>元素，所以您的html无效。

切勿在段落内嵌套标题。

第二，HTML5不支持align。改用css或内联样式。

仅使用p元素（不嵌套h5）将按预期工作。见下文

  p {
        margin-left: 10px;
    }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="">exercitation ullamco</a> laboris nisi ut aliquip ex ea.</p>

解释更多。这样，浏览器将解释您的HTML代码

<p></p><h5>heading here<a>link</a></h5></p>请注意，p在h5开始之前已关闭。这就是为什么'margin-left'不起作用的原因。另外，您最终得到一个额外的</p>结束标记

段落不使用左边界移动

2 个答案: