垂直導航欄和段落之間的空白區域

我有一些神祕的白色空間，我不知道如何擺脫。我有一個垂直列表，我希望它在文本段落旁邊。這是我的HTML和CSS垂直導航欄和段落之間的空白區域

解決的jmgem我也不得不重新調整我的段落元素的大小，所以它會適合旁邊的導航欄

HTML

<div id="classOfferingList" class="classOfferingList" align="left"> 
    <ul> 
     <li> 
      <a href="" >General U.S. K-12 English Speaking Course</a> 
     </li> 
     <li> 
      <a href="" >University Preperation Course</a> 
     </li> 
     <li> 
      <a href="" >SAT Preperation Course</a> 
     </li> 
     <li> 
      <a href="" >GRE Preperation Course</a> 
     </li> 
    </ul> 
</div> 
<div id="classOfferingInfo" > 
    <p>example text</p> 
</div>

CSS

.classOfferingList ul { 
    list-style-type: none; 
    float: left; 
} 

.classOfferingList ul li { 
    margin: 5px 0px; 
} 

.classOfferingList ul li a { 
    list-style: none; 
    margin: 1px 0px; 
    display: inline-block; 
    background-color: blue; 
    width: 35%; 
    text-align: center; 
}

來源

2014-03-14 Joshua de Leon

這可能是'inline-block'元素造成的。見[這個答案]（http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements/19038859#19038859） –

@JoshCrozier感謝您的答案，但這並沒有改變任何東西。 –

這是你正在尋找的東西http://jsfiddle.net/32q6y/ *改變你的文字顏色，因爲我看不到它：p –

首先，我複製你的代碼的jsfiddle。繼續看看。

http://jsfiddle.net/GyuX5/

如果我正確理解你的問題，你希望把該段旁邊的垂直菜單。因此，這裏是你的CSS調整

.classOfferingList ul { 
    list-style-type: none; 
    float: left; 
} 

.classOfferingList ul li { 
    margin: 5px 0px; 
} 

.classOfferingList ul li a { 
    list-style: none; 
    margin: 0px; 
    display: inline-block; 
    background-color: grey; 
    text-align: center; 
    width: 150px; 
} 

#classOfferingInfo { 
    display: inline-block; 
}

我有你的段落顯示爲inline-block的，然後我改變了李一的寬度150像素，而不是35％。瞧。

選擇不使用左浮動塊，因爲它們會在佈局變得越來越複雜時破壞佈局。嘗試將HTML/CSS想象成從左到右填充瀏覽器中的一行的塊。

來源

2014-03-14 03:29:30 jmgem

嘿謝謝這幾乎解決了我需要的東西。我不得不調整段落大小（小屁股決定去我的導航欄下面）。謝謝您的幫助！ –

沒問題的隊友 – jmgem

嘗試將兩個主div浮動到左側，然後它們將彼此相鄰。 See Fiddle

.classOfferingList { 
    float: left; 
} 
.classOfferingList ul { 
    list-style-type: none; 
    float: left; 
} 

.classOfferingList ul li { 
    margin: 5px 0px; 
} 
#classOfferingInfo { 
    float: left; 
} 
.classOfferingList ul li a { 
    list-style: none; 
    margin: 1px 0px; 
    display: inline-block; 
    background-color: blue; 
    width: 35%; 
    text-align: center; 
    color: #fff; 
}

來源

2014-03-14 03:24:33

http://jsfiddle.net/erenyener/TC856/

#classOfferingList > ul 
{ 
    padding:0px; 
}

您需要重置UI元素

或你的問題可能是這個

FIDDLE

來源

2014-03-14 03:27:24

垂直導航欄和段落之間的空白區域

回答

相關問題