徽标不会出现在导航中心

时间：2015-04-24 20:14:41

标签： css

我试图让我的徽标显示在导航中心。我已经绞尽脑汁，我无法弄清楚它为什么会赢。

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

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

4 个答案:

答案 0 :(得分：0)

您需要切换<a>的布局上下文（内联defaut）

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 （与上面的代码段相同）

答案 1 :(得分：0)

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

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

Forked codepen：http://codepen.io/anon/pen/MwYgPa

答案 2 :(得分：0)

您需要做的一些事情。

对于初学者来说，你的徽标是＆＃34; a＆＃34;带有背景图片的标签，但是＆＃34; a＆＃34; tag是一个内联元素，这意味着你的高度和宽度声明将不适用。

为了让你的身高和宽度影响你的＆＃34; a.logo＆＃34;，你需要将显示设置为＆＃34; block＆＃34;或＆＃34;内联块＆＃34; 

.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  */
}

你还需要更多的宽度，你需要制作你的＆＃34; ul＆＃34;为更广泛的菜单。

答案 3 :(得分：0)

轻松您可以在img

中使用html <a> tag内的css bg链接 
<li><a class="logo" href= '#'><img src="http://i.imgur.com/B5AV1zb.png" alt=""></a></li>
相关问题
最新问题