1

我有 2 个元素没有响应margin: 260px 0 0 0;or margin-top: 260px;。我不知道为什么。当我在 IE 中打开开发工具并检查元素时，边距在那里，但元素停留在 div 的顶部，就好像margin: 260px 0 0 0;根本没有设置一样。

为什么 margin 不适用于a内部元素.SideContainer a {...}or .RightSide a {...}？

        <section class="RightSide SideContainer">
            <a href="~/Shared/Services/WebDevelopment">Packages &amp; Pricing</a>
        </section>


    .SideContainer h1 {
        color: white;
    }

    .SideContainer a {
        margin: 260px 0 0 0;
    padding: 10px 15px 10px 15px;
    background-color: #ec462f;
    color: white;
    }

.RightSide {
    float: right;
}

    .RightSide a {
        margin-top: 200px;
    }
4

6 回答 6

3

锚标签是inline元素，因此顶部和底部边距样式不会按预期应用于它们。将display属性设置为inline-block，它应该可以工作。

.SideContainer a, .RightSide a {
    display: inline-block;
}

请记住，将元素的display属性设置为inline-block将导致源代码中的空格被呈现。这是您可以防止这种情况的方法。

另一种方法是将display属性设置为block并在需要时设置float属性。

.SideContainer a, .RightSide a {
    display: block;
    float: left; /*if required*/
}
于 2013-05-22T06:10:35.673 回答
0

你需要像这样浮动你的'a'标签：

.SideContainer a {
    ...
    float:left;
}
于 2013-05-23T10:43:34.243 回答
0

我认为添加 display:block 就足够了

.RightSide {
margin-top: 200px;
display: block;
}
于 2013-05-22T06:54:41.907 回答
0

内联元素不响应边距。

您需要使 a 标签显示块，或者您可以将其浮动到右侧，这样它的行为就会像常规的“a”标签一样正确，并且也会响应边距。

尝试这个：

.RightSide a {
    margin-top: 200px;
    float: right;
}
于 2013-05-22T06:16:22.090 回答
0

我处理了您的代码，您必须放入display:inline-blcok锚标记才能获取margin-top.

解决方案：

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .SideContainer h1 {
                color:white;
            }
            .SideContainer a {
                padding:10px 15px 10px 15px;
                background-color:#ec462f;
                color:white;
            }
            .RightSide {
                float:right;
            }
            .RightSide a {
                display:inline-block;
                margin-top:200px;
            }
        </style>
    </head>
    <body>
        <section class="RightSide SideContainer">
            <a href="~/Shared/Services/WebDevelopment">Packages &amp; Pricing</a>
        </section>
    </body>
</html>
于 2013-05-22T06:49:12.393 回答
0

它不起作用，因为您的锚标记是内联元素并且不响应边距。

如果您display:block在 .SideContainer a 上添加 CSS，它会移动。

http://codepen.io/anon/pen/Girwh

于 2013-05-22T06:11:28.620 回答