对齐问题

Question

I have a seemingly simple alignment issue I can't seem to fix. 我有一个看似简单的对齐问题，但似乎无法解决。 I have a basic menu inside a div. 我在div内有一个基本菜单。 I want to add content underneath the menu, so I created another div with a top-margin of 10px. 我想在菜单下添加内容，所以我创建了另一个div，其上边距为10px。 For some reason, it is not recognizing the content as separate and keeps inserting the content in line with the menu. 由于某种原因，它无法将内容识别为单独的内容，并始终将内容插入菜单中。 The information span class is being placed on the same level as the menu. 信息跨度类与菜单位于同一级别。 Please let me know if you see a problem with the way these divisions are set up! 如果您发现这些部门的设置方式有问题，请告诉我！

The CSS code just has a padding of 10px on the top for the information class. CSS代码在信息类的顶部仅填充了10px。

HTML CODE: HTML代码：

  <body>

    <div class="content">
        <h1 class="title">HOME PAGE</h1>
        <img src="pic.jpg" alt="Picture" style="padding:0px 0px 0px 45px"/>
        <ul id="sdt_menu" class="sdt_menu">
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">EXAMPLE</span>
                        <span class="sdt_descr">EXAMPLE</span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">EXAMPLE</span>
                        <span class="sdt_descr"></span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">EXAMPLE</a>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">EXAMPLE</span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">EXAMPLE</span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">EXAMPLE</a>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">EXAMPLE</span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">EXAMPLE</span>
                        <span class="sdt_descr"></span>
                    </span>
                </a>
                <div class="sdt_box">
                    <a href="#">A</a>
                </div>
            </li>
        </ul>
    </div>
<div> 
    <span class="information">
    <p> 
    Some content here
    </p>
</span>
</div>

Answer 1

With out seeing your CSS it sounds like a float issue. 没有看到您的CSS，这听起来像个浮动问题。 You need to clear floated elements. 您需要清除浮动元素。 Assuming you did them correctly they're most likely on the li tags. 假设您正确地执行了操作，则很有可能在li标签上。 You can use overflow:hidden on your parent ul : 您可以在您的父母ul上使用overflow:hidden ：

ul#sdt_menu{
    overflow: hidden;
}

or you can use a cleafix method 或者您可以使用Cleafix方法

ul#sdt_menu:after{
    content: '';
    display: block;
    clear: both;
}

If neither of these work please post your CSS for further help 如果以上两种方法均无效，请发布您的CSS以获得更多帮助

对齐问题

问题描述

1 个解决方案

解决方案1
0 2015-01-10 16:21:24

对齐问题

问题描述

1 个解决方案

解决方案1 0 2015-01-10 16:21:24

解决方案1
0 2015-01-10 16:21:24