css dialox box html li項目

Question

我怎麼能有點像對話框besite元素的子彈？

<div class="contentContenedor"> 
    <div class="tituloContentContenedor">Box: Promociones nacionales</div> 
    <div class="linksContentContenedor"> 
     <ul> 
      <li> 
      <span>Vuela barato por Chile</span> 
      <span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">612</span> 
     </li> 
      <li> 
      <span>Encántate con el sur de nuestro país</span> 
      <span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">102</span> 
     </li> 
      <li> 
      <span>Disfruta el norte de Chile</span> 
      <span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">64</span> 
     </li> 
      <li> 
      <span>Canjea tus kms. y vuela por Chile</span> 
      <span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">49</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; 

} 
.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; 
} 
.linksContentContenedor ul{ 
    padding:0; 
    margin:0; 
    margin-left:28px; 
    padding-bottom:10px; 
} 
.linksContentContenedor li span{ 
    position:relative; 
    left:-5px; 
} 
.linksContentContenedorClicks{ 
    position:absolute; 
    left:10px; 
} 

我能恩加方與德旁邊信息li元素，但它保留在容器內。

我想它是這樣：

但每個li元素，並始終指向子彈。 最讓我感到困惑的是，我無法獲得容器外的信息。 如果我添加絕對位置，那麼我不知道左邊和上邊距，因爲這個盒子是php創建的。

PS：它不是一個工具提示，有點看起來像它，但它必須始終存在，而不是當懸停或任何其他。

thnsnk youuu！

Answer 1

這是我做什麼，

.info { 
    position: absolute; 
    right: 115%; 
    width: 60px; 
    height: 40px; 
    background: #c1c1c1; 
    text-align: center; 
} 

.info:before { 
    content: ""; 
    height: 0; 
    width: 0; 
    position: absolute; 
    left: 100%; 
    border-left: 15px solid #c1c1c1; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
} 

這個CSS將使「信息框」你正在尋找。這只是一個開始，所以你可以在任何你想要的地方加入它。如果您只是尋找邊框而不是純色，那麼我會建議您使用圖像。我相信這可能是可能的，但不是非常有效/得到支持。

以下是JSFIDDLE與CSS的其餘部分。只要確保li包含.info是position: realtive;。