Question

我真的不确定这里包含哪些相关信息，所以我会很慷慨。在我的页面顶部，我有一条水平线。现在，在这一行的顶部，在右下角，我想放置由三个gif图像组成的meny。图像很好地对齐，但不会一直向下。早些时候，我有相同的设计，但只使用CSS创建三个盒子，它就像一个魅力。图像宽度为96px，高度为45px。这是我的HTML，然后是CSS（我正在使用960网格系统）：

哦，是的，我已经尝试过使用CSS的负边距。

<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;
}

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

<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;
}

The images won't align to bottom line.

Answer 1

首先，这是无效的HTML：

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

<a>不能成为<ul>的直接子女。您需要将锚标记放在 <li>元素中。

然后，我会更改您的CSS，以便<a>元素具有display: block，具有宽度和高度属性，并拍摄背景图像。您的<li>元素应保留float: right以及宽度和高度属性，而不保留其他内容。

您可能需要调整<li>和<a>元素的边距和填充。

Answer 2

嗯，我不能100％确定基于HTML，CSS和＆amp;的黑线的来源。您提供的图片，但这是一个可行的解决方案：

在这里演示：http://jsfiddle.net/stGPz/

在CSS中添加了以下内容：

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

我唯一可以想到它为什么不起作用的是确保你的图像高度为45px，图像覆盖整个45px。但是这个解决方案为您提供了一条线，并且列表项目触及该行。

Answer 3

如果你想让它粘在容器div（grid_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;        
}

http://jsfiddle.net/pqV5E/29/

你也可以使你的<ul>绝对和相对容器，并使用bottom：0;你会像它一样坚持到底：

ul {
    list-style:none;
    padding:0;
    position:absolute;
    bottom:5px; 
    right:0;
}

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

如果您要使用最后一种技术，请务必删除<ul>页边距，并将该边距值添加到容器的高度

http://jsfiddle.net/pqV5E/28/

我使用圆角按钮代替图像，但您可以切换到您喜欢的任何图像。

为什么我的列表图像不会与底部对齐？

3 个答案: