Question

我代码中的一个元素正在充当其上方另一行代码的子元素，而我正尝试重新编写代码，因此该元素独立存在。这是我的Codepen的链接：

https://codepen.io/DevinCassidy/pen/pBNNKY

我尝试了一个分页符，并在其周围包含了另一个div元素。

\\\
    <div>
    <h2 id="Price">Price</h2>
    <section id="pricing">
    <div id="online">
    <div class="level">Online
    </div>
    <h2>$1,599.00</h2>
    <ol>
    <li>Plus Free Shipping</li>
    </ol>
    <button class="btn">Select</button>
    <br>
    <div id="in-store">
    <div class="level">In-Store
    </div>
    <h2>$1,599.00</h2>
    <ol>
    <li>*Out the door!*</li>
    </ol>
    <button class="btn">Select</button>
    </section>
\\\\\\

Answer 1

之所以这样做，是因为它们是嵌套的

经过清理的正确缩进代码如下：

<div>
  <h2 id="Price">Price</h2>
  <section id="pricing">
    <div id="online">
      <div class="level">Online</div>
      <h2>$1,599.00</h2>
      <ol>
        <li>Plus Free Shipping</li>
      </ol>
      <button class="btn">Select</button>
      <br>
      <div id="in-store">
        <div class="level">In-Store</div>
        <h2>$1,599.00</h2>
        <ol>
          <li>*Out the door!*</li>
        </ol>
        <button class="btn">Select</button>
      </div><!-- this div was missing -->
    </div><!-- this div was missing -->
  </section>
</div><!-- this div was missing -->

通过缩进，您会发现实际上<div id="in-store">是<div id="online">的子代。你应该这样做

<div>
  <h2 id="Price">Price</h2>
  <section id="pricing">
    <div id="online">
      <div class="level">Online</div>
      <h2>$1,599.00</h2>
      <ol>
        <li>Plus Free Shipping</li>
      </ol>
      <button class="btn">Select</button>
    </div><!-- inserted because <div id="online" should be closed -->
    <!-- <br> not needed, because <div>s are block elements -->
    <div id="in-store">
      <div class="level">In-Store</div>
      <h2>$1,599.00</h2>
      <ol>
        <li>*Out the door!*</li>
      </ol>
      <button class="btn">Select</button>
    </div>
  </section>
</div>

我分叉了您的Codepen，并进行了一些更正：https://codepen.io/HerrSerker/pen/7cec5ac558e7c4fdaecbd8ac1d269178

不要关闭您的<img>元素；错误： ~~{<img src=""></img>~~ ，正确：<img src=""/>或仅<img src="">
请勿使用<br>在元素之间留出空间。为此使用CSS margin
<br>标签不会关闭<div>元素。只有</div>可以
始终缩进代码。 Codepen可以为您自动执行此操作：标记所有代码，然后按 Shift Tab 或单击位于右上方的向下插入符号（v）您的HTML代码区域，然后从下拉菜单中选择整洁的HTML 。
Codepen通过为意外关闭标记赋予不同的背景颜色来显示不正确的HTML标记嵌套。参见示例：https://codepen.io/HerrSerker/pen/3263405edba14d071b84d4860aac9a73

有没有一种方法可以编写代码，以使一个元素不充当另一个元素的子元素？

1 个答案: