Question

我在水平导航栏的左侧添加了一个徽标，我遇到了一些不同的问题。首先是截图：http://i.imgur.com/TUafzKs.png

问题：

- 我想将所有文字与徽标的BOTTOM对齐。现在，所有文本都自动排到最顶层。

- 在链接悬停时，我希望背景颜色变为白色，以扩展到条形的整个高度，但它只是做了一部分。以下是截图：http://i.imgur.com/ljkEdol.png

- 正如您在第一个屏幕截图中看到的那样，条形图不会延伸到页面的末端（侧面和顶部）。中间有一小部分空间。我希望那里没有空白;只是粉红色延伸到边缘。

栏的HTML：

<ul id="nav">
<li><img  id="logo" src="images/logo2.png">
<li><a href="../work.htm">Work</a></li>
<li><a href="../about.htm">About</a></li>
<li><a href="../thoughts.htm">Thoughts</a></li>
<li><a href="../contact.htm">Contact</a></li>
</ul>

CSS：

#nav {
width:100%;
float:left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #D0489A;
border-bottom: 3px solid #D0489A;
}

#nav ul {
position: absolute;
right:0px;
bottom: 2px;
}

#nav li {
float: left; 
font-family: whitney light, sans-serif;
}

#nav li a {
list-style: none;
display:inline;
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}

#nav li a:hover {
color: black;
background-color: white;
}

#logo {
width:200px;
}

Answer 1

#nav li a {
    list-style: none;
    display: inline-block;
    padding: 8px 15px;
    margin-top:174px; // you may need to adjust to get lined up perfectly
    text-decoration: none;
    font-weight: bold;
    color: white;
    border-right: 1px solid #D0489A;
}

使用导航栏中的图像（徽标）

1 个答案: