0

我真的不确定这里包含哪些相关信息，所以我会很慷慨。在我的页面顶部，我有一条水平线。现在，在这条线的顶部，在右下角，我想放置由三个 gif 图像组成的菜单。图像很好地向右对齐，但不会一直向下到底部。早些时候，我有相同的设计，但只使用 CSS 来创建三个盒子，它就像一个魅力。这些图像正好是 96px 宽和 45px 高。这是我的 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;
}

编辑：这是我的新代码。正确的 (?) 语法，但问题仍然存在。另请参阅它的外观图像。

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

图像不会与底线对齐。

4

3 回答 3

0

首先，这不是有效的 HTML：

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

<a>不能是 的直子<ul>。您需要将锚标签放在<li>元素内。

然后，我会更改您的 CSS，使<a>元素具有display: block，具有宽度和高度属性，并获取背景图像。您的<li>元素应该保留float: right宽度和高度属性，仅此而已。

您可能不得不摆弄<li>和<a>元素的边距和填充。

于 2012-10-29T22:26:13.713 回答
0

好吧，根据您提供的 HTML、CSS 和图像，我不能 100% 确定黑线来自哪里，但这里有一个可行的解决方案：

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

将以下内容添加到您的 CSS 中：

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

我能想到的唯一另一件事是确保您的图像高度为 45 像素，并且图像覆盖整个 45 像素。但是此解决方案为您提供了一条线，并且列表项与该线接触。

于 2012-10-29T23:43:36.910 回答
0

如果你想让它粘在你的容器 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/

我使用圆角按钮而不是图像，但您可以切换到任何您想要的图像。

于 2012-10-29T23:48:44.770 回答