徽标不会显示在导航中心

Question

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

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

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

Answer 1

您需要切换<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>

​

除了inline或float之外的任何东西都可以使用display:

您的笔派生了http://codepen.io/gc-nomade/pen/jPENQN (与上面的代码片段相同)

Answer 2

您的列表标题正在解析为display: inline，行内项目不能有高度或宽度。手动将其设置为display: inline-block将允许它接收您的height和width属性。

.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;
    display: inline-block;
}

派生代码：http://codepen.io/anon/pen/MwYgPa

Answer 3

有几件事你需要做。

对于初学者来说，您的徽标是一个带有背景图像的"a“标记，但"a”标记是一个内联元素，这意味着您对高度和宽度的声明将不适用。

为了让你的高度和宽度影响你的"a.logo"，你需要将显示设置为"block“或"inline-block”。

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

您还需要更宽一点，并且需要使菜单的"ul“更宽。