Question

我有以下HTML标记，我希望菜单div标记始终与父容器的底部边框相距5px。

我可以手动通过试验和错误定位它使用margin-top，但如果我要更改徽标或修改div大小，我必须使用反复试验再次更改此值。一个更好的解决方案是告诉我是否总是距离底部5px，而不是从顶部告诉它是X像素。

为什么这不起作用？ alt text

<body>
    <div id="header">
        <img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />    
        <ol id="topuserbar">
            <li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
            <li><a href="#">Mis Anuncios</a></li>
            <li><a href="#">Perfil</a></li>
            <li><a href="#">Cerrar Sesion</a></li>
        </ol>
    </div>

    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>

#header
{
    background-image: url('images/headerBackground.png');
    background-repeat:repeat;
    width:auto;
}

#topuserbar
{
    border: 1px solid red;  
    font-family:Georgia;
    font-size:large;
    float:right;
    margin-top:45px;  
}

#topuserbar ol
{
}

#topuserbar li
{
    display:inline;
    margin-left:10px;
    color:#fff;
}

Answer 1

你正在使用ol这是一个列表...因此它有自己的边距和填充预设，因此可以在结果上发挥重要作用。

您也可以使用position: absolute作为css上的菜单。和position: relative为您的父元素。然后使用bottom: 5px;作为菜单。这将始终将菜单5px粘贴到父母身上，我认为这是你正在寻找的东西。

也像我说检查ol标签边距和填充已被删除。

Answer 2

好吧，我总是鼓励人们使用reset.css文件http://meyerweb.com/eric/tools/css/reset/

为什么ol？我认为ul在这样的菜单中更有意义......

Answer 3

让HTML元素始终处于最底层是非常困难的。但是，您可以尝试在标题div外移动ol，将位置设置为相对位置并将其顶部向上拉-Ypx。

图像尺寸可能会发生变化，但您可以相对放心，相对于div的位置不会发生变化。

除非你将ol的下边距设置为-Ypx，否则这对于你的其他DOM流程来说会有点奇怪。

不是真的答案......但它可能会有所帮助。

为什么保证金最高可行，但利润率最低？

3 个答案: