CSS div 跨度位置文本重叠

Question

当文本溢出时，我在定位多个相关 div 时遇到问题：

理想情况下它应该是这样的：

在 div 上使用右侧的“-”垂直对齐中心，并且 space 足以让文本在不重叠的情况下中断，所有这些都没有使用任何固定大小。

我已经设法在 jsfiddle 上找出问题：http://jsfiddle.net/RASMiranda/xadfxnpn/20/

关键的类似乎是：

#application-subscribe-tab > div {
    position: relative;
    height: 16px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: absolute;
    left: 0px;
}
#application-subscribe-tab > div > .remove-subscribe {
    position: absolute;
    right: 0px;
    cursor: pointer;
}

提前致谢！

Answer 1

这应该可以解决问题：

#application-subscribe-tab > div {
    position: relative;
    ** min-height ** : 16px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: ** relative ** ;
    left: 0px;
}

http://jsfiddle.net/xadfxnpn/23/

Answer 2

#application-subscribe-tab > div {
position: relative;
height: 16px;
padding: 7px 0px;
}

body {
    color: #4C4C4C;
    font: 12px/1.4 Arial,Helvetica,Verdana,sans-serif;
}

.col {
    margin-left: 4%;
}
.col {
    box-sizing: content-box;
    width: 291px;
}
.col {
    float: left;
}

.bloc {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0px 0px 14px;
    box-shadow: 0px 2px 5px 1px #BFBFBF;
    border-radius: 3px 0px 0px;
    background-color: #FFF;
}

h2 {
    margin: 0px !important;
}
div.action {
    padding: 5px 14px 7px;
    position: relative;
    z-index: 2;
}
.action {
    min-height: 320px;
    height: 320px;
    max-height: 320px;
    padding-left: 3px;
    padding-right: 5px;
}

#application-subscribe-tab {
    overflow-y: scroll;
    max-height: 325px;
    padding-right: 10px;
}

#application-subscribe-tab > div {
    position: relative;
    height: 16px;
    padding: 7px 0px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: absolute;
    left: 0px;
}
#application-subscribe-tab > div > .remove-subscribe {
    position: absolute;
    right: 0px;
    cursor: pointer;
}

<div class="col">
    <div id="list-aplication-validated" class="bloc light-green-white">
        <h2>Mes notifications mail validées</h2>
        <div class="action"> 
            <div id="application-subscribe-tab">
               <div>
                   <span class="application-subscribe">OCTOPUS</span>
                   <span class="remove-subscribe" app-tid="262" csa-tid="195">-</span>
                </div>
               <div>
                   <span class="application-subscribe">ARHISTO - ARCHIVAGE HISTORIQUE COMMERCE</span>
                   <span class="remove-subscribe" app-tid="388" csa-tid="195">-</span>
                </div>
               <div>
                   <span class="application-subscribe">GEPETO</span>
                   <span class="remove-subscribe" app-tid="389" csa-tid="195">-</span>
                </div>
                <div>
                    <span class="application-subscribe">OPOC</span>
                    <span class="remove-subscribe" app-tid="390" csa-tid="195">-</span>
                </div>
            </div>
        </div>
     </div>
</div>

CSS div 跨度位置文本重叠

CSS div span position text overlaps

html

css

css-position