在 HTML 列表/导航菜单中添加图片/徽标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20416144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a picture/logo in a HTML-list/Navigation menu
提问by Joeono
I'm creating a floating navigation menu for my page list in my blog, and within that list I'm trying to change one of the links into my logo. Some would just include the logo in the background of this navigation menu, but my problem is that the logo is like a ribbon that overlaps the things below, and if it were part of the background it would be cut off.
我正在为我博客中的页面列表创建一个浮动导航菜单，在该列表中，我试图将其中一个链接更改为我的徽标。有些人只会在此导航菜单的背景中包含徽标，但我的问题是徽标就像一条丝带，与下面的内容重叠，如果它是背景的一部分，则会被切断。
Here'swhat I mean.
这就是我的意思。
At the moment the logo is a separate picture, but I'd like to connect them both, and include it as another 'link' because otherwise it's hiding the things below it.
目前徽标是一张单独的图片，但我想将它们连接起来，并将其作为另一个“链接”包含在内，否则它会隐藏其下方的内容。
html USED:
使用的 html：
<div id='nav'>
<p class='title'><a href='#'></a></p>
<ul id='navigation'>
<li class='navigation-Blog'><a href='#'>Blog</a></li>
<li class='navigation-Crew'><a href='#'>Crew</a></li>
<li class='navigation-Promos'><a href='#'>Promos</a></li>
<li class='navigation-Tricks'><a href='#'>Tricks</a></li>
<li class='navigation-Parties'><a href='#'>Parties</a></li>
<li class='navigation-P.J.Squad'><a href='#'>P.J. Squad</a></li>
<li class='navigation-Chat'><a href='#'>Chat</a></li>
<li class='navigation-Fanart'><a href='#'>Fanart</a></li>
<li class='navigation-Graphics'><a href='#'>Graphics</a></li>
<li class='navigation-Beta'><a href='#'>Beta</a></li>
</ul>
</div>
and the CSS I used:
和我使用的 CSS：
#nav
{
background: url(http://4.bp.blogspot.com/-dVtgikk- kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top center; background-color: none;
width:100%;
height:66px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title
{
display:none;
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:15px;
}
#nav a
{
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
font-weight: bold;
font-family:century gothic;
text-decoration:none;
color:#262626;
opacity:0.26;
}
#nav a:hover
{
opacity:0.36;
}
采纳答案by misterManSam
Place the logo in an image element. If you want the logo to link to your home page, wrap it in a link.
将徽标放在图像元素中。如果您希望徽标链接到您的主页，请将其包装在链接中。
See example leftand example centered.
请参阅示例 left和示例 centric。
To center: Float the logo to the left and give the nav a width. Split the navigation into two uls and change the id of navigation to a class of navigation.
居中：将徽标浮动到左侧并为导航设置宽度。将导航拆分为两个 ul，并将导航的 id 更改为导航类。
Place the logo image in between the two uls.
将徽标图像放在两个 ul 之间。
Add this to your CSS:
将此添加到您的 CSS：
#logo { float: left; }
#nav { width: 1500px; /* Too large, just an example */ }
.navigation { float: left; }
The image in between your two navigation uls:
两个导航 ul 之间的图像：
#logo {
float: left;
}
#nav {
width: 1500px;
/* Too large, just an example */
}
.navigation {
float: left;
list-style: none;
padding: 0;
}<div id='nav'>
<ul class='navigation'>
<li class='navigation-Blog'><a href='#'>Blog</a></li>
<li class='navigation-Crew'><a href='#'>Crew</a></li>
<li class='navigation-Promos'><a href='#'>Promos</a></li>
<li class='navigation-Tricks'><a href='#'>Tricks</a></li>
<li class='navigation-Parties'><a href='#'>Parties</a></li>
</ul>
<img src="http://placehold.it/152x198" id="logo" />
<ul class="navigation">
<li class='navigation-P.J.Squad'><a href='#'>P.J. Squad</a></li>
<li class='navigation-Chat'><a href='#'>Chat</a></li>
<li class='navigation-Fanart'><a href='#'>Fanart</a></li>
<li class='navigation-Graphics'><a href='#'>Graphics</a></li>
<li class='navigation-Beta'><a href='#'>Beta</a></li>
</ul>
</div>回答by Talkingrock
You can add elements inside a list item, so play around with the code below and see if this gets you closer to what you want. Here's the html for the list item that contains the logo. Just slide it in-between your other list items, if you want it in the center of the menu.
您可以在列表项中添加元素，因此请使用下面的代码，看看这是否让您更接近您想要的。这是包含徽标的列表项的 html。如果您希望它位于菜单的中央，只需将其滑动到其他列表项之间即可。
<li>
<a href="#">
<span class="span-logo">
<img src="your-logo-goes-here.png" />
</span>
</a>
</li>
Here's the CSS. You'll want to assign min-height on your nav or leave the height out because when you shrink the page, the menu items will start another line, and a flexible height will expand to include all the menu items.
这是CSS。您需要在导航上指定 min-height 或不考虑高度，因为当您缩小页面时，菜单项将开始另一行，并且灵活的高度将扩展以包括所有菜单项。
#nav {
min-height:66px;
}
.span-logo {
display: inline-block;
vertical-align: top;
height: 118px;
width: 152px;
}
If you decide to use inline-block for your li menu items, remember inline-block needs vertical-align:top; and has a small gap around each item. The gap is easy to remove, and here's a good article on inline-block:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
如果您决定为 li 菜单项使用 inline-block，请记住 inline-block 需要 vertical-align:top; 并且每件物品周围都有一个小间隙。差距很容易消除，这里有一篇关于 inline-block 的好文章：http: //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it -糟透了/
Using the Browser's Developer Tools
使用浏览器的开发工具
You can click on F12 in most browsers to open the Developer Tools. Depending on your browser, you can click on individual elements within the page to view its CSS and HTML, and you can edit, add or delete the code. This is very helpful when troubleshooting, or seeing how an element is constructed. You can edit the code in the browser and see the results, versus going back and fourth between editing your actual html code, and refreshing the browser. Currently CodeSchool.com is offering a really good free course on Chrome's Developer Tools: https://www.codeschool.com/courses/discover-devtools.
您可以在大多数浏览器中单击 F12 以打开开发人员工具。根据您的浏览器，您可以单击页面中的各个元素以查看其 CSS 和 HTML，并且您可以编辑、添加或删除代码。这在故障排除或查看元素的构造方式时非常有用。您可以在浏览器中编辑代码并查看结果，而不是在编辑实际 html 代码和刷新浏览器之间来回切换。目前，CodeSchool.com 正在提供关于 Chrome 开发者工具的非常好的免费课程：https://www.codeschool.com/courses/discover-devtools 。
回答by jignesh kheni
Here is the JSFiddle demo:
这是JSFiddle 演示：
I made changes in your CSS and HTML stuctures, too.
我也对您的 CSS 和 HTML 结构进行了更改。
HTML :
HTML :
<div id='nav'>
<div class="nav-inner">
<p class='title'><a href='#'>Space Heroes Fansite</a></p>
<ul id='navigation'>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Crew</a></li>
<li><a href='#'>Promos</a></li>
<li><a href='#'>Tricks</a></li>
<li><a href='#'>Parties</a></li>
<li class="clear"> </li>
</ul>
<div class=" main_logo">
<a href='#' class="logo_li">
<span class='span-logo'>
<img src='http://1.bp.blogspot.com/-5l0RRPCgqfw/UqDmPP5mLnI/AAAAAAAADbk/i4ohihy8wHg/s1600/header+badge3.png'/>
</span>
</a>
</div>
<ul id='navigation'>
<li><a href='#'>P.J. Squad</a></li>
<li><a href='#'>Chat</a></li>
<li><a href='#'>Fanart</a></li>
<li><a href='#'>Graphics</a></li>
<li><a href='#'>Beta</a></li>
<li class="clear"> </li>
</ul>
<div class="clear"></div>
</div>
</div>
CSS :
CSS :
#nav{
background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top center; background-color: none;
width:100%;
height:66px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
left:0px;
right:0px;
}
.nav-inner{
width:1373px;
margin:auto;
}
.title{
display:none;
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
#navigation{
list-style-type:none;
padding:0px;
float:left;
width:auto;
margin:0px auto 0px;
}
li {
display:block;
float:left;
padding:15px;
}
#nav a{
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
font-weight: bold;
font-family:century gothic;
text-decoration:none;
color:#262626;
opacity:0.26;
}
#nav a:hover {
opacity:0.36;
}
.span-logo {
margin-top:-100px;
display: inline-block;
vertical-align: top;
height: 105px;
width: 152px;
margin-top:0px;
}
div.main_logo{
padding:0px;
float:left
}
#nav div a.logo_li{
opacity:1
}
.span-logo img{
width:100%;
height:auto;
}
.clear{
width:0px;
height:0px;
content:'';
display:table;
clear:both;
float:none;
}
I hope this will help you.
我希望这能帮到您。
