保持李：在兩條線上對齊之前

我用一個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; 
}

感謝您的幫助！

來源

2013-12-15 gepex

我沒有看到應用於任何li上的僞選擇器:before。它用於包含點擊計數值的所有跨度，通過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; 
}

來源

2013-12-15 19:39:55

我愛你！哈哈謝謝 – gepex

我一直在想我的答案更合適，但如你所願...... ;-) –

只要把span元素在你li S中的文本之前和不添加top: 0

這使得你可以行高和所有的文本對齊。

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

來源

2013-12-15 19:43:00

保持李：在兩條線上對齊之前

回答

相關問題