奇怪的绝对定位错误(或者我只是愚蠢)

时间:2011-08-13 21:04:01

标签: html css html5

我正在尝试将某条信息放在<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>的任何想法都会受到欢迎...

1 个答案:

答案 0 :(得分:4)

您需要将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 */
}

执行此操作会使div.tweet_actions相对于li绝对定位。