標題與列表重疊

標題「無論」重疊在我的名單上。

我希望列表出現在標題後面。

<div style="width:1024px;height=auto;position:absoulte;min-height:768px;"> 
    <div class="heading"> 
     <h1>Whatever</h1> 
    </div> 

    <div class="list" id="listID" > 
     <div style="height:15px;">Nope</div> 
     <div style="height:15px;">Yes</div> 
     <div style="height:15px;">Maybe</div> 
     <div style="height:15px;">Definetely</div> 
    </div> 
    <button>Print</button> 
    <button style="posititon:relative;top:0px;">add</button> 
</div>

，這是CSS

.heading 
{ 
    position:relative; 
    top:50px; 
} 

.list 
{ 
    position:relative; 
    min-height:10px; 
    top:0px; 
    margin-left:20px; 
}

http://jsfiddle.net/zd5n3L5z/

幫我個忙。謝謝:)

來源

2014-08-30 ArvindSadasivam

更改頂緣上方爲標題

.heading 
{ 
    position:relative; 
    margin-top:50px; 
} 

.list 
{ 
    position:relative; 
    min-height:10px; 
    top:0px; 
    margin-left:20px; 
}

來源

2014-08-30 14:14:10

爲什麼沒有頂級的工作？ – ArvindSadasivam 2014-08-30 14:17:14

top只會移動元素，但不會影響頁邊空白處的佈局。 – 2014-08-30 14:20:28

哦，我不知道...非常感謝... – ArvindSadasivam 2014-08-31 05:29:45

既然你不想影響相對於其他要素possition，你不需要使用相對attribut。所以你的'CSS'應該看起來像：

.heading 
{ 
    margin-top:50px; 
} 

.list 
{ 
    min-height:10px; 
    margin-left:20px; 
}

這將保持你的CSS清潔！

來源

2014-08-30 14:24:43

在.list類添加display: inline：

CSS

.heading 
{ 
    position:relative; 
    top:50px; 
} 

.list 
{ 
    position:relative; 
    min-height:10px; 
    top:0px; 
    margin-left:20px; 
    display: inline;/*Add display inline*/ 
}

fiddle

直列此值使一個元件，以產生一個或多個內聯框。

此外，您的主div容器中有語法錯誤。是position:absolute否absoulte。

來源

2014-08-30 14:30:17

您設置.heading頂部：50px。這裏發生的是，這個值（像素），相對於.LIST但它位於在div不是簡單地改變這樣的價值：

.heading 
{ 
    position:relative; 
}

來源

2014-08-30 16:43:31 Paco

不要使用位置頂部「.heading」類

.heading 
{ 
    position:relative; 

} 

.list 
{ 
    position:relative; 
    min-height:10px; 

    margin-left:20px; 
    margin-bottom:30px; 
} 
button{clear:both;}

來源

2014-09-02 10:59:23

標題與列表重疊

回答

相關問題