对齐问题

我有一个看似简单的对齐问题，我似乎无法解决。我有一个div内的基本菜单。我想在菜单下添加内容，所以我创建了另一个div，其顶边距为10px。出于某种原因，它不会将内容识别为单独的内容，并且不断将内容插入到菜单中。信息跨度类与菜单位于同一级别。如果您发现这些部门设置的方式存在问题，请告诉我们！对齐问题

CSS代码在信息类的顶部只有一个10px的填充。

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>

来源

2015-01-10 Sarah Markers

创建一个小提琴或摘录与CSS –

有了不再看到你的CSS这听起来像一个漂浮的问题。您需要清除浮动元素。假设你做得正确，他们很可能在li标签上。你可以在你的父母ul使用overflow:hidden：

ul#sdt_menu{ 
    overflow: hidden; 
}

，或者你可以使用一个cleafix方法

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

如果没有这些工作，请发表你的CSS寻求进一步帮助

来源

2015-01-10 16:21:24 jmore009

回答

相关问题