Question

我刚开始使用jsFiddle进行此操作（https://jsfiddle.net/travism2006/tp2y5pvu/1/）

body .main .leftAd {
  border: 4px red dashed;
  width: 160px;
}

<a href="#main">Skip Links</a>
<div class="header">
  <ul>
    <li><a>Coding</a>
    </li>
    <li><a>Web Tech</a>
    </li>
    <li><a>Data Fun</a>
    </li>
    <li><a>Robotics</a>
    </li>
  </ul>
</div>
<div class="leftAd">sss</div>

有人可以解释为什么'sss'消失+边框没有显示？

Answer 1

我玩弄小提琴，发现我的广告拦截器正在添加'display：none;'到其中包含“Ad”子字符串的元素。

将元素从'leftAd'和'rightAd'重命名为'left'和'right'，使它们按照您的预期显示。

Answer 2

HTML：

<a href="#main">Skip Links</a>
    <header>
        <ul>
              ...
        </ul>
     <\header>
<div class="left-ad"><p>sss</p></div>

OR

<aside class="left-ad">sss</aside>

我建议你回过头来看看代码，因为如果你想要更好地理解它，就会有很多语义问题需要解决。文森特所说的可能有用，但这不是最佳解决方案。此外，添加到HTML5的新语义元素减少了一些代码，使您的代码更容易理解。它不得不一遍又一遍地制作div和文本元素。您应该使用标题和旁边的语义元素，而不是使用div元素，这些元素可以分别用于标题和广告。您可以像使用简单的CSS一样浮动每个。最后，您不应该自己左右命名类属性。这是非常通用的，它使您的代码更难以辨别。我使用了.left-ad和.right-ad，它运行得很好。如果您有任何其他问题，我可以随时为您提供帮助。理解这些概念以使代码更易于阅读，如果需要稍后进行调试，并使您真正理解写作背后的语义，这一点至关重要。

当我打开你的小提琴时，HTML缺少很多内容。具体来说，这里出现的sss但不是你的js小提琴。如果div在你的情况下没有内容，它就会自动折叠，这就是为什么你看到一条扁平的红线，因为顶部和底部边框位于彼此的顶部。为了为添加的sss容器增加空间，只需添加自定义填充值等。

<div class="main"></div>

在HTML页面中消失文本

2 个答案: