我對這些無序列表做了什麼錯誤？

我想獲得2個無序列表工作在一個div來實現兩個不同大小的列，但由於某種原因，這是額外的頂部/底部填充內的div，我不想在那裏。我對這些無序列表做了什麼錯誤？

#contact-box { 
    float: right; 
    border-top: 1px solid #ccc; 
    background-color: green; 
    width: 250px; 
    padding: 0px; 
} 

     ul#networks { 
      list-style-type: none; 
      float: left; 
      width: ; 
      padding: 0px; 
     } 
      #networks li { 
      border-bottom: 1px solid #ccc; 
      padding: 7px; 

      } 

     ul#contacts { 
      list-style-type: none; 
      float: right; 
      width: 70%; 
      background-color: red; 
      padding: 0px;   

     } 
      #contacts li { 
      border-bottom: 1px solid #ccc; 
      padding: 7px; 
      }

你可以在這裏看到：http://jsfiddle.net/XwfLD/ 我知道這將是一些在CSS簡單，但如果有人可以幫助我們將不勝感激！

來源

2014-02-21 user3323016

因爲您使用的是具有保證金的ul，所以如果您使用div並將它們堆疊爲ul，即使您不提供保證金，您也可以得到您想要的結果：0 –

添加這些行：

ul{ 
    margin: 0; 
    padding: 0; 
}

Fiddle

來源

2014-02-21 01:59:42 JunM

這種簡單的修復方法。謝謝！ – user3323016

我相信你的問題是，你不必爲UL＃網絡中指定的寬度..如果你改變

ul#networks { 
list-style-type: none; 
    float: left; 
    width: ; 
    padding: 0px; 
}

去..

ul#networks { 
list-style-type: none; 
    float: left; 
    width: 30% ; 
    padding: 0px; 
}

他們應該一起移動。從你的描述中我相信這就是你想要的。讓我知道這是如何工作的。

來源

2014-02-21 02:07:01

我不相信JunM的解決方案實際上可以實現您正在嘗試完成的任務......默認情況下，**無序列表仍將佔用其容器的100％寬度**。這意味着你不可能在一個div內有兩個ul。帶走**邊距**和**填充**只會使它們之間的垂直距離變小。我希望這有幫助：）。 –

我對這些無序列表做了什麼錯誤？

回答

相關問題