css - Logo 不会出现在导航中心

标签 css

我正在尝试让我的 Logo 显示在我的导航中心。我绞尽脑汁也想不通为什么它不会。

html 

  <div class ="menu-bar">

    <ul id='menu'> 

 <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">HOME</span></a></li>     
<li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">SHOP</span></a></li>
<li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">CHECKOUT</span></a></li>

<li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>

<li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">ABOUT</span></a></li>
<li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">CONTACT</span></a></li>
<li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">PRESS</span></a></li>
</ul>

 </div>
</div>
</div>

CSS

body {
    font: 18px "Avenir Light", 'Open Sans', sans-serif; 
    color: #989898;
    background-color: #F3F4F4;
    font-weight: 100;
    width: 100%;
    overflow-x: hidden;

}

.container {
margin-right:auto;
margin-left:auto;
padding-left:15px;
padding-right:15px

}

p{ 

font:18px "Avenir Light";
color: #989898;



} 



section {
    padding: 100px 0;
}


section.success {
    color: #fff;
    background: #8D4198;
    margin-right: -15px;
    margin-left: -15px;
}

section.white{
    color: #989898;
    background: #F3F4F4;
    margin-right: -15px;
    margin-left: -15px;

}

section.orange{

    color: #fff;
    background: #EF5336;
    margin-right: -15px;
    margin-left: -15px;

}

/* Headings */ /* Headings */ /* Headings */
/* Headings */ /* Headings */ /* Headings */

h5 {
    font-size: 32px;
    color: #8D4198;
    font-weight: lighter;
    text-align:center;


}

h4 {
    font-size: 32px;
    color: #989898;
    font-weight: lighter;
    text-align:center;
    /*border-bottom: solid 1.5px #EE5435; */
    margin-top: -20px;

}



/* Header */ /* Header */ /* Header */ /* Header */
/* Header */ /* Header */ /* Header */ /* Header */


.header {
    background-color:#F3F4F4;
    height:150px;
    margin: -10px;


}

.header .menu-bar{
    padding-top: 80px;


}


.header .menu-bar ul {
    margin:0 auto;
    width: 950px;;
    list-style: none;

}

.header .menu-bar li {
  float: left;
  border:medium #0F0;
  padding-left: 32px;

}


.header ul li a.logo {
    background: url("http://i.imgur.com/B5AV1zb.png");
    background-repeat:no-repeat;
    width: 60px;    
    height: 90px;
    margin: 0 auto;
    margin-top:-33px;
    padding-bottom: 10px;
    border-bottom: none;
}

.header .menu-bar a:hover  {
 color: #8D4198;
}

.header .menu-bar aorange:hover  {
 color: #8D4198;
}

.header .menu-bar ayellow:hover  {
 color: #8D4198;
}


#here,
#us {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #93D7E7;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #93D7E7;
  padding-right: 50px;
  padding-left: 0px;

}


#shop,
#contact {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #EE5435;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #EE5435;
  padding-right: 50px;
  padding-left: 0px;

}


#checkout,
#press {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #D3DC3F;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #D3DC3F;
  padding-right: 50px;
  padding-left: 0px;
}

这是我的代码笔:http://codepen.io/anon/pen/KpwPoO

我需要新鲜的眼睛!有什么建议么？谢谢!

最佳答案

您需要为 <a> 切换布局上下文(默认内联)

body {
  font: 18px "Avenir Light", 'Open Sans', sans-serif;
  color: #989898;
  background-color: #F3F4F4;
  font-weight: 100;
  width: 100%;
  overflow-x: hidden;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px
}

p {
  font: 18px "Avenir Light";
  color: #989898;
}

section {
  padding: 100px 0;
}

section.success {
  color: #fff;
  background: #8D4198;
  margin-right: -15px;
  margin-left: -15px;
}

section.white {
  color: #989898;
  background: #F3F4F4;
  margin-right: -15px;
  margin-left: -15px;
}

section.orange {
  color: #fff;
  background: #EF5336;
  margin-right: -15px;
  margin-left: -15px;
}
/* Headings */
/* Headings */
/* Headings */
/* Headings */
/* Headings */
/* Headings */

h5 {
  font-size: 32px;
  color: #8D4198;
  font-weight: lighter;
  text-align: center;
}

h4 {
  font-size: 32px;
  color: #989898;
  font-weight: lighter;
  text-align: center;
  /*border-bottom: solid 1.5px #EE5435; */
  
  margin-top: -20px;
}
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */

.header {
  background-color: #F3F4F4;
  height: 150px;
  margin: -10px;
}

.header .menu-bar {
  padding-top: 80px;
}

.header .menu-bar ul {
  margin: 0 auto;
  width: 950px;
  ;
  list-style: none;
}

.header .menu-bar li {
  float: left;
  border: medium #0F0;
  padding-left: 32px;
}

.header ul li a.logo {
  background: url("http://i.imgur.com/B5AV1zb.png");
  background-repeat: no-repeat;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  margin-top: -33px;
  padding-bottom: 10px;
  border-bottom: none;
  display: block
}

.header .menu-bar a:hover {
  color: #8D4198;
}

.header .menu-bar aorange:hover {
  color: #8D4198;
}

.header .menu-bar ayellow:hover {
  color: #8D4198;
}

#here,
#us {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #93D7E7;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #93D7E7;
  padding-right: 50px;
  padding-left: 0px;
}

#shop,
#contact {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #EE5435;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #EE5435;
  padding-right: 50px;
  padding-left: 0px;
}

#checkout,
#press {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #D3DC3F;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #D3DC3F;
  padding-right: 50px;
  padding-left: 0px;
}
<div class= "header">

  <div class ="menu-bar">
  
    <ul id='menu'> 
     
 <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">HOME</span></a></li>     
<li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">SHOP</span></a></li>
<li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">CHECKOUT</span></a></li>

<li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>

<li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">ABOUT</span></a></li>
<li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">CONTACT</span></a></li>
<li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">PRESS</span></a></li>
</ul>

 </div>
</div>
</div>

display:除了inline或 float会工作

你的笔叉了http://codepen.io/gc-nomade/pen/jPENQN (与上面的片段相同)

关于css - Logo 不会出现在导航中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29856657/

上一篇：php - 在 PHP 中使用内联 CSS、HTML 并排放置图像

下一篇：jquery - 将鼠标移出父级时保持子菜单列出

相关文章：

css - 使用未导入到它们的 css 文件来 react 组件

html - css height/min-height 100% 窗口

css - 如何在 zurb 基础上叠加两个元素并仍然具有响应行为

html - 为什么当我更改图像格式时它会弄乱我的网站

html - 样式表未在Espresso 2中链接。

javascript - iOS 自动播放视频的取消静音按钮

javascript - 使用 jQuery 和 javascript 附加元素时出现奇怪的格式

jquery - 基于媒体查询和视口(viewport)大小运行 Jquery 函数

css - 网格外的 Zurb Foundation 背景色

html - 为什么我的 CSS 转换不适用于转换 : matrix3d property?

©2024 IT工具网  联系我们