Question

以下是供参考的jsfiddle：http://jsfiddle.net/4devvjyv/1/

我正试图让“Section”框移到灰线上方，这样看起来“Section”框就在这条线的中心。但负利润并没有推动该方块的上行。

.divider {
    margin-top: 6px;
    border-top: 2px solid gray;
    font-size: 10px;
    position: relative;
}

.divider-text {
    position: relative;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    margin-top: -200px;
}

分隔线是直线，分隔线 - 文本是“截面”框。我为分频器设置了6px的上边距，这样我就不会弄乱两个内容之间的间距，因为我希望“Section”框在线上方6px，在线下方8px。

有谁知道为什么它不起作用？我尝试使用负左边距并且“部分”框表现得如此。

Answer 1

更新了您的jsfiddle

使用top: -20px代替margin-top:-200px。我使用-20px因为-200px会漂浮得很高而且无法看到。

.divider-text {
    position: relative;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    top: -20px;
}

另一个解决方案是

.divider-text {
    position: absolute;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    margin: -20px; // making it center.
}

从中释放元素的父元素（position: absolute）会使元素浮动，跟随负边距。

元素仍在其父元素下，因此任何浮动样式都不会超出其父元素，除非您通过float，position:absolute或display:block释放它。但是显示块实际上并没有从其父级释放元素，而是将其移动到下一个元素。 - 虽然需要任何人的输入。

为什么我的负利润率不会超过某个区域？

1 个答案: