對齊問題

我有一個看似簡單的對齊問題，我似乎無法解決。我有一個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

回答

相關問題