Question

简而言之，这是我的DOM：

<div class="markable_wrapper">
    <span class="marker_label"></span>
    <span class="markable ">&nbsp;</span>
</div>

<div class="markable_wrapper">
    <span class="marker_label"></span>
    <span class="markable second_box">&nbsp;</span>
</div>

看看它的外观，包括CSS：

http://jsfiddle.net/6cg89/3/

我需要红色三角形出现在右上角，而父容器忽略框边距（由于动态定位元素，如第二个框）。有没有办法只在CSS中处理这个？

请记住我无法更改框边距，而且我也无法嵌套跨距，因为在很多情况下它是textarea或其他内容。

提前致谢！

Answer 1

如果伪元素是一个选项，因为根据您的要求不清楚，您可以完全省略'标记范围'。

JSFiddle Demo

<强> HTML

<div class="markable_wrapper">
    <span class="markable ">&nbsp;</span>
</div>

<div class="markable_wrapper">
    <span class="markable second_box">&nbsp;</span>
</div>

<!-- This is how it should looks like: -->

<div class="markable_wrapper">
    <span class="markable third_box">&nbsp;</span>
</div>

<强> CSS

.markable_wrapper {
    position: relative;
    display: block;
    float: left;
    clear: both;
    margin-bottom: 5px;
}
.markable {
    position: relative;
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    left: 0;
    margin-right: 15px;
    border: 1px solid black;
}
.markable:after {
    background-color: rgba(0, 0, 0, 0);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #F00 rgba(0, 0, 0, 0);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: absolute;
    content:"";
    top:-1px;
    left:100%;
    margin-left: -7px;
}

.second_box {
    margin-right: 50px;
}
.third_box {
    margin-right: 0;

}

Answer 2

如果您的markable元素具有固定宽度，则可以设置left的{{1}}属性，而不是右侧：

markable_label

如果您知道.markable_label { position: absolute ; left: 44px ; /* Width of markable - Width of markable_label */ }的边距，则可以设置markable属性：

right

如果您使用PHP或其他内容生成代码，并且您知道.markable_label { position: absolute ; right: 47px; /* Margin right - half the width of triangle. */ }或width，则可以推断margin-right或left您right的属性。如果没有，您必须使用javascript来检测markable_label / width并设置margin / left属性。

Answer 3

您需要在.markable和.second_box设置保证金吗？分别有15px和50px的余量。

如果您移除了边距，然后将right: -3px;添加到.marker_label，那么它将被定位在右上角。

NOTE:你必须给-3px，因为它是你用边框添加的宽度的一半（边框扩展了一半宽度内部和一半外部

获得相对父母忽略子边际

3 个答案: