奇怪的絕對定位錯誤（或者我可能簡直就是愚蠢的）

我試圖在<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; 
}

正如你所看到的，我期待div.tweet_actions將自己定位爲<li>框右側的底部，這應該是400x（58/78）。問題是，事實並非如此。它本身定位到它的父元素，section#left-content.sidebar-content.left右下角......現在，如何將這些div.tweet_actions在<li>的右下方放置任何想法將是最歡迎...

來源

2011-08-13 Julián

您需要添加position:relative到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絕對定位做。

來源

2011-08-13 21:07:40 tw16

這解決了這個問題，非常感謝。 –

奇怪的絕對定位錯誤（或者我可能簡直就是愚蠢的）

回答

相關問題