Html 为什么赢了'；我的列表图像是否与底部对齐？

我真的不知道什么信息是相关的，包括在这里，所以我会慷慨。在我的页面顶部，我有一条水平线。现在，在这行的顶部，在右下角，我想放置我的菜单，它由三个gif图像组成。图像很好地向右对齐，但不会一直向下到底部。早些时候，我有同样的设计，但只使用CSS创建了三个框，效果非常好。图像宽96像素，高45像素。这是我的HTML，后面是CSS（我使用的是960网格系统）：

哦，是的，我已经试着用CSS为li使用负边距

<div class="grid_8">
            <ul>
                <a href="cv.html"><li></li></a>
                <a href="arbete.html"><li></li></a>
                <a href="index.html"><li></li></a>
            </ul>
</div>

ul {
list-style:none;
padding:0;
margin-top:50px;
}

li:first-child {
margin-right:-5px;
}

li {
background-image:url('bilder/meny_hem.gif');
float:right;
width:96px;
height:45px;
margin-bottom:0px;
padding-bottom:0px;
}

保险商实验室{
列表样式：无；
填充：0；
边缘顶部：50px；
}
李：第一个孩子{
右边距：-5px；
}
李{
背景图片：url（'bilder/meny_hem.gif'）；
浮动：对；
宽度：96px；
高度：45px；
边缘底部：0px；
垫底：0px；
}

编辑：这是我的新代码。正确的（？）语法，但问题仍然存在。另请参见其外观的图像

<ul>
    <li><a href="cv.html"></a></li>
    <li><a href="arbete.html"></a></li>
    <li><a href="index.html"></a></li>
</ul>

ul {
list-style:none;
padding:0;
margin-top:50px;
}

li:first-child {
margin-right:-5px;
}

li {
float:right;
width:96px;
height:45px;
}

a {
display:block;  
background-image:url('bilder/meny_hem.gif');
width:96px;
height:45px;
margin-bottom:0px;
padding-bottom:0px;
}

保险商实验室{
列表样式：无；
填充：0；
边缘顶部：50px；
}
李：第一个孩子{
右边距：-5px；
}
李{
浮动：对；
宽度：96px；
高度：45px；
}
a{
显示：块；
背景图片：url（'bilder/meny_hem.gif'）；
宽度：96px；
高度：45px；
边缘底部：0px；
垫底：0px；
}

---

首先，这不是有效的HTML：

<a href="cv.html"><li></li></a> 

不能是

的直接子级。您需要将锚定标记放在

元素中

然后，我将更改CSS，使

元素具有

显示：块

，具有宽度和高度属性，并拍摄背景图像。您的

元素应该保留

float:right

和width和height属性，而不保留其他属性

---

您可能需要在

和
元素上修改边距和填充。
根据您提供的HTML、CSS和图像，我不能100%确定黑线来自何处，但这里有一个可行的解决方案：

此处演示：

在CSS中添加了以下内容：

ul {
    border-bottom:1px solid #000;
    height:45px; /* The height of your li */
}

我能想到的另一件事就是为什么它不工作，那就是确保你的图像是45像素高，并且图像覆盖了整个45像素。但是这个解决方案会给你一行，并且列表项会碰到这一行。
如果你想让它粘在容器div（网格8）的底部，你必须调整它的高度，使其接近按钮的高度，如下所示：

<div class="grid_8 container">
    <ul>
        <li><a href="cv.html">HEM</a></li>
        <li><a href="arbete.html">HEM</a></li>
        <li><a href="index.html">HEM</a></li>
    </ul>
</div>

.container{
    width:100%;
    height:50px;
    border-bottom:1px solid black;        
}

如果您要使用最后一种方法，请确保删除您的
边距顶部，并将该边距值添加到容器的高度


我用圆角按钮代替图像，但你可以切换到任何你喜欢的图像。
是的，我觉得HTML看起来很奇怪。现在所有的代码都干净漂亮，但问题仍然存在。我试图摆弄这两种元素，但它们根本不动。这可能与其他元素的属性有关吗，比如ul？我很困惑，你想让它们都接触到线？因为现在它们都在底部对齐。是的，我想让它们接触到线。谢谢！经过多次尝试和错误，我找到了一个不同的解决方案。我认为问题在于我没有指定
元素的宽度和长度。当我这样做时，我能够使用
position:absolute
将列表图像定位到正确的位置。
ul {
    list-style:none;
    padding:0;
    position:absolute;
    bottom:5px; 
    right:0;
}

.container{
    width:100%;
    height:100px;
    position:relative;      
}