标题与列表重叠

标题“无论”重叠在我的名单上。

我希望列表出现在标题后面。

<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

标题与列表重叠

回答

相关问题