0

我有这个 html

<body id="page-id-login" class="">
<div id="viewport" data-am-control="vertical-layout" >
    <div id="container_buttons" data-am-control="vertical-layout" >
        <button class="item_vertical btn" >Twitter dinámico</button>
        <button class="item_vertical btn">Spinner simple</button>
        <button class="item_vertical btn">Spinner personalizado</button>
    </div>
</div><!-- END VIEWPORT-->

</body>

这个CSS

#viewport{
width: 480px;
height: 600px;
background: linear-gradient(#a8a8a8, #ebebeb);
}

#container_buttons{
padding: 0 10px;
}

.item_vertical{
display:inline-block;
}

.btn{
font-size: 20px;
color: white;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background: linear-gradient(#0088cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
margin-top: 20px;
}

.btn:active{
background: linear-gradient(#0044cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
}

有了这个，我看到了：

http://img805.imageshack.us/img805/3980/capturadepantalla201305i.png

如果我添加到 #container_buttons 这个：

#container_buttons{
margin: 60px;
padding: 0 10px;
}

边缘顶部移动所有内容（不仅是 div #container_buttons），就像您在这张图片中看到的那样（上面有空白）

http://img20.imageshack.us/img20/6738/capturadepantalla201305iz.png

那么......有什么方法可以让边距只移动 id="container_buttons" 的 div？

谢谢！！

4

2 回答 2

2

您的边距正在崩溃，以下是解决方法：

#viewport {
    overflow:auto;
}

来源：CSS：父母没有边框时的Margin-top

参考：http ://www.w3.org/TR/CSS2/box.html#collapsing-margins

于 2013-05-30T16:44:03.407 回答
0

你必须做这样的事情：

#viewport{
width: 480px;
height: 600px;
background: linear-gradient(#a8a8a8, #ebebeb);
}

#container_buttons{
    padding-top:10px;
    margin: 10px;
}

.item_vertical{
display:inline-block;
}

.btn{
    margin-bottom: 10px;
font-size: 20px;
color: white;
width: 100%;
background: linear-gradient(#0088cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
}

.btn:active{
background: linear-gradient(#0044cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
}

结果现在是正确的。我更改了所有填充和边距选项，因为它们有点混在一起。这是一个例子。

于 2013-05-30T16:43:51.020 回答