Question

我正在为我的博客中的页面列表创建一个浮动导航菜单，在该列表中，我正在尝试将其中一个链接更改为我的徽标。有些人会在这个导航菜单的背景中包含徽标，但我的问题是徽标就像一个与下面的东西重叠的丝带，如果它是背景的一部分，它将被切断。

Here's我的意思。

目前，徽标是一张单独的图片，但我想将它们连接起来，并将其作为另一个“链接”包含在内，因为否则它会将其隐藏在其下方。

html USED：

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

和我使用的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;
}

Answer 1

您可以在列表项中添加元素，因此请使用下面的代码，看看这是否让您更接近您想要的内容。这是包含徽标的列表项的html。只需将其滑入其他列表项之间，如果您希望它位于菜单的中心。

<li>
<a href="#">
<span class="span-logo">
<img src="your-logo-goes-here.png" />
</span>
</a>
</li>

这是CSS。您需要在导航器上指定最小高度或保留高度，因为当您缩小页面时，菜单项将开始另一行，并且灵活高度将展开以包括所有菜单项。

#nav {
 min-height:66px;
}

.span-logo {
display: inline-block;
vertical-align: top;
height: 118px;
width: 152px;
}

如果您决定对li菜单项使用内联块，请记住内联块需要vertical-align：top;并且每个项目周围都有一个小的差距。差距很容易删除，这里有一篇关于内联块的好文章：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

使用浏览器的开发者工具

您可以在大多数浏览器中单击F12以打开开发人员工具。根据您的浏览器，您可以单击页面中的各个元素来查看其CSS和HTML，您可以编辑，添加或删除代码。这在排除故障或查看元素的构造方式时非常有用。您可以在浏览器中编辑代码并查看结果，而不是在编辑实际的html代码和刷新浏览器之间返回第四。目前，CodeSchool.com正在为Chrome的开发者工具提供一个非常好的免费课程：https://www.codeschool.com/courses/discover-devtools。

Answer 2

将徽标放在图像元素中。如果您希望徽标链接到您的主页，请将其包装在链接中。

请参阅example left和example centered。

要居中：将徽标浮动到左侧并为导航设置宽度。将导航拆分为两个uls并将导航ID更改为导航类。

将徽标图像放在两个uls之间。

将此添加到您的CSS：

#logo { float: left; }
#nav { width: 1500px; /* Too large, just an example */ }
.navigation { float: left; }

两个导航栏之间的图像：

#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>

Answer 3

以下是JSFiddle demo：

我也在CSS和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：

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

我希望这会对你有所帮助。

在HTML列表/导航菜单中添加图片/徽标

3 个答案: