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