Question

我正在设计一个网页，在某些线条的主体右侧有一个小标签。为此，我在相对定位的内部创建了一个绝对定位的<div>。

标签正好符合我的要求。但是，即使绝对定位的<div>维度为0 x 0，它仍然会占用一些空间。

这可以在http://jsfiddle.net/sznH2/看到。我希望这两个按钮垂直排列。相反，标签旁边的按钮会向左推几个像素。

任何人都可以看到造成这种间距的原因以及如何消除它？

HTML：

<div>
    <div class="pull-right">
        <button>Hello world!</button>
    </div>
</div>
<div>
    <div class="pull-right">
        <button>Hello world!</button>
        <div class="outer-relative">
            <div class="inner-relative">
                <span>XXX</span>
            </div>
        </div>
    </div>
</div>

CSS：

body {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.pull-right {
    text-align: right;
}
.outer-relative {
    display:inline-block;
    position:relative;
    height: 0px;
    width:0px;
}
.inner-relative {
    position: absolute;
    left: 0px;
    top: -15px;
    background-color: Lime;
}

Answer 1

内联块元素将呈现标记之间的间距。看看这个：http://jsfiddle.net/sznH2/4/

<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>

删除空格，你很高兴

Answer 2

我认为你需要做出正确的位置：亲戚和外在的相对绝对值

http://jsfiddle.net/tousif123/sznH2/3/

这是你在寻找什么？

.pull-right {
    position:relative;
}

.outer-relative {
    position:absolute;
}

0 x 0相对分区仍占用房间

2 个答案: