css - 使用 CSS 和 HTML 的奇怪格式

Question

当我在这个 div 上使用 margin-top:-50px; 时，为什么它会在 http://fluroltd.com/clients/harveys/ 处缩进文本在关于 Harveys Electrical 的 slider 下方？

#news-item { margin-top:-50px; }

<div id="page">
<div id="slider">
            <ul>                
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li> </li>          
            </ul>
</div><!-- slider -->

<?php query_posts('category_name=Latest News&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div id="news-item">
            <h1></h1>
            <?php the_content('<br/>Read More'); ?>
        </div><!-- news-item-home -->
<?php endwhile; ?>
<?php endif; ?>

</div><!-- page -->

Answer 1

这是一个float 问题。当 float 元素与它们重叠时，文档流中的普通元素让位于 floated 元素。您可以通过给 #news-item 一个 clear CSS 属性来确认这一点，然后观察缩进消失。

有一个修复程序，但有点麻烦。使用这些 CSS 规则:

#news-item {
  clear: both;
  position: relative;
  top: -40px;
}

但是，要真正解决问题，您需要找到有问题的元素。