Question

我使用了li：之前作为信息标签。工作完美，就是当李是两行长的时候，李：在移动到seconf线之前并没有留下子弹。

有点难以解释，但我附上了差异的图片

enter image description here

我如何强迫李：在留下指着子弹之前？

HTML：

<div class="contentContenedor">
    <div class="tituloContentContenedor">Box: Promociones nacionales</div>
    <div class="linksContentContenedor">
           <ul>
               <li>Vuela barato por Chile
                <span class="linksContentContenedorClicks">752</span>
               </li>
                <li>Encántate con el sur de nuestro país
                <span class="linksContentContenedorClicks">178</span>
                </li>
                 <li>Disfruta el norte de Chile
                 <span class="linksContentContenedorClicks">106</span>
                 </li>
                  <li>Canjea tus kms. y vuela por Chile
                  <span class="linksContentContenedorClicks">87</span>
                 </li>
            </ul>
       </div>
    </div>

CSS：

.contentContenedor{
    background-image:url('img/fondo_cajas_home.gif');
    background-repeat:no-repeat;
    background-position:center bottom; 
    width:270px;
    height:140px;
    margin-left:60px;

}
.tituloContentContenedor{
    background-image:url('img/fondo_tit_cajas_home_270_23.gif');
    background-repeat:no-repeat;
    width:270px;
    height:23px;
    color:white;
    font:bold 11px Arial,Helvetica,sans-serif;
    padding:6px 0px 2px 11px;
}
.linksContentContenedor{
    font-size:12px;
    text-decoration:underline;
    color:#0267C3;
    margin-top:1px;
}
.linksContentContenedor ul{
    padding:0;
    margin:0;
    margin-left:28px;
    padding-bottom:10px;
}
.linksContentContenedor li{
    position: relative;
    padding-bottom:3px;
    margin-top:0px;
}
.linksContentContenedorClicks {
    position: absolute;
    right: 115%;
    width: auto;
    height: 16px;
    background: #033D7D;
    text-align: center;
    color:white;
    padding-left:4px;
}

.linksContentContenedorClicks:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    left: 100%;
    border-left: 15px solid #033D7D;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

感谢您的帮助！

Answer 1

我没有在任何:before上看到伪选择器li。它通过linksContentContenedorClicks类用于包含点击计数值的所有跨度。它没有问题。

由于linksContentContenedorClicks绝对位于相对定位的li元素内，您可能希望添加top: 0;，以便它们始终贴在周围li的顶部

.linksContentContenedorClicks {
    position: absolute;
    right: 115%;
    top: 0; /* this was missing */
    width: auto;
    height: 16px;
    background: #033D7D;
    text-align: center;
    color:white;
    padding-left:4px;
}

Answer 2

只需将span元素放在li的文字前面，然后不要添加top: 0

这样可以保持行高和所有文本对齐。

       <ul>
           <li>
               <span class="linksContentContenedorClicks">752</span>Vuela barato por Chile
           </li>
       </ul>

保持li：在两条线上对齐之前

2 个答案: