CSS 定位 HTML 圖標

Question

這是一個小問題。 我試過擺弄它，但沒有運氣。 所以基本上我試圖讓這個小圖標在中心但在欄的末尾：

http://puu.sh/1u4SI

但是，如果我放入 CSS top: 5px; 它會顯示這個： http : //puu.sh/1u4T1

代碼是這樣的：

 <style>
 a.news-item, a.box-link {
 display: block;
 padding: 5px;
 margin: 0 0 2px -5px;
 background: #E9E9E9;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 color: #8C8C8C;
 text-decoration: none;
 font-weight: normal;
}

a.news-item {
 width: 100%;
 height: 36px;
 color: #8C8C8C;
}


a.box-link {
 width: 230px;
 padding: 5px;
 height: 24px;
 overflow: hidden;
 color: #8C8C8C;
}

a.news-item span.title {    
 font-size: 18px;
}


a.news-item:last-child, a.box-link:last-child {
 margin: 0 0 0 -3px;    
}

a.news-item:hover, a.box-link:hover {
 background: #E2E2E2;
}

.pane .delete {
 position: absolute;                
 right: 28px;  
 top: 5px;   
 cursor: pointer;   
}

.pane {
 padding: 3px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){                  
$(".pane .delete").click(function(){
    $(this).parents(".pane").animate({
        opacity: 0
    }, 'slow', function(){
        $(this).slideUp();
    });
});

});
</script>


    <h2>Topher's Articles</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br />


    <div class="pane">  
    <img src="../real/_lib/_image/minus.png" alt="delete" class="delete" />             
    <a class="news-item" href="#/media/<?php echo $row['id'] ?>.<?php echo str_replace(" ", "-", $row['news_title']); ?>">        
    <span class="title"><p><?php echo $row['news_title'] ?> <font size="2"> &raquo; <?php echo $row['news_date'] ?></font></p></span>                
    </a> 
    </div>          

</body>
</html>

Answer 1

您是否嘗試將padding-top instad 設置為top ？

Answer 2

我想你需要使用margin-top而不是top 。

如果你想讓top在相對坐標下工作，你需要應用position: relative到它的容器。