奇妙な絶対配置エラー（または私は単に愚かです）

Question

<li>の中に特定の情報を配置して、それをボックスの右下部分に限定しようとしています。さて、コードに探して：

<ul class="tweet_list"> 
    <li class="tweet_first tweet_odd"> 
     <a class="tweet_avatar" href="http://twitter.com/"> 
      <img width="48" border="0" height="48" title=" avatar" alt=" avatar" src=""> 
     </a> 
     <span class="tweet_text"> 
      @ 
      <a href="http://twitter.com/"></a> 
      lololol 
     </span> 
     <div class="tweet_actions"> 
      <img title="Twitter" src="images/twitter/bird_16_blue.png" /> 
      <time datetime="111-7-2T17:6:2">2/7</time> 
      <a class="tweet_action tweet_reply" target="_blank" title="Reply" href="http://twitter.com/intent/tweet?in_reply_to="> 
       <img title="Reply" src="images/twitter/reply.png"> 
       Reply 
      </a> 
      <a class="tweet_action tweet_retweet" target="_blank" title="Retweet" href="http://twitter.com/intent/retweet?tweet_id="> 
       <img title="Retweet" src="images/twitter/retweet.png"> 
       Retweet 
      </a> 
      <a class="tweet_action tweet_favorite" target="_blank" title="Favorite" href="http://twitter.com/intent/favorite?tweet_id="> 
       <img title="Favorite" src="images/twitter/favorite.png"> 
       Favorite 
      </a> 
    </div> 
</li> 
<!-- These are all the same as the previous li--> 
<li class="tweet_even"> 
<li class="tweet_odd"> 
<li class="tweet_even"> 
<li class="tweet_odd"> 
</ul> 

とCSS：

div#sidebar-twitter ul { 
    list-style: none outside none; 
    text-align: left; 
} 
div#sidebar-twitter ul li { 
    border: 1px solid #000000; 
    border-radius: 10px 10px 10px 10px; 
    height: 58px; 
    margin-bottom: 10px; 
    max-height: 78px; 
    min-height: 58px; 
    width: 400px; 
} 
div#sidebar-twitter ul li a.tweet_avatar { 
    float: left; 
    padding: 5px; 
} 
div#sidebar-twitter ul li div.tweet_actions { 
    bottom: 0; 
    position: absolute; 
    right: 0; 
} 
div#sidebar-twitter ul li:last-child { 
    margin-bottom: 0; 
} 

あなたが見ることができるように、私はそのはず、<li>ボックスの右下の部分に自分自身を配置するdiv.tweet_actionsを期待してい400x（58/78）になります。問題は、そうではありません。それは、その親要素の右下、section#left-content.sidebar-content.leftに自分自身を配置し...さて、<li>の右下の部分で、このdiv.tweet_actionsを配置する方法上の任意のアイデアが最も歓迎されるでしょう...あなたはposition:relativeを追加する

Answer 1

必要div#sidebar-twitter ul li。

これを行う

div#sidebar-twitter ul li { 
    border: 1px solid #000000; 
    border-radius: 10px 10px 10px 10px; 
    height: 58px; 
    margin-bottom: 10px; 
    max-height: 78px; 
    min-height: 58px; 
    width: 400px; 
    position: relative; /* add this */ 
} 

はliからdiv.tweet_actions相対の絶対配置を行います。