Fiddle

Question

嘿伙计们我是CSS的新手很抱歉，如果这是一个非常简单和愚蠢的问题，我尝试从开始设计网站，但我不能从失败中获得它发生在我的菜单，文本移出背景我无法找到原因。

看起来像： http://funedit.com/imgedit/soubory/small_18262058231396865881.jpg

但是那个文本应该在那个blacck背景的中间：P

我的HTML：

  <div id="menu">
    <ul>
     <a href="#"><li>GAMESITES<span id="arrow"></span></li></a>
      <li id="spacer"> </li>
      <a href="#"><li>HRY<span id="arrow"></span></li></a>
      <li id="spacer"> </li>
      <a href="#"><li>SERVERY<span id="arrow"></span></li></a>
      <li id="spacer"> </li>
      <a href="#"><li>CLANKY<span id="arrow"></span></li></a>
      <li id="spacer"> </li>
      <a href="#"><li>FORUM<span id="arrow"></span></li></a>
      <li id="spacer"> </li>
      <a href="#"><li>DOWNLOADS<span id="arrow"></span></li></a>
      <li id="spacer"> </li>
      <a href="#"><li>BLOGY<span id="arrow"></span></li></a>
      <li id="spacer"> </li>
      <a href="#"><li>FLASHOVKY<span id="arrow"></span></li></a>                                                
    </ul> 
  </div>

我的CSS：

#menu{
    background-image: url("images/menubg.png");
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    margin: 0 22px;          
}

#spacer{
    background-image: url("images/menu_spacer.png");
    background-repeat: no-repeat;
    width: 1px;
    height: 48px;
    padding: 0px 0px;
}

#menu ul{
    list-style-position: inside;    /* Bodka v novom riadku vo vnutry */
    list-style-type: none;          /* bez bodky */
}

#menu ul li{   
    padding: 1px 5px 0px 0px;
    display: inline-block;
    color: #f7f7f7;
}
#arrow{
    background-image: url("images/sipka.png");
    background-repeat: no-repeat;
    width: 10px;
    height: 8px;
    padding-left: 3px;
    display: inline-block; 
}

您可以在以下位置找到LIVE预览： http://funedit.com/andurit/try2/

如果你能帮助我解决它，我会非常感谢你。

Answer 1

#spacer{
    background-image: url("http://funedit.com/andurit/try2/images/menu_spacer.png");
    background-repeat: no-repeat;
    width: 1px;
    height: 28px;
    padding: 0px 0px;
}

我唯一改变的是间隔中的高度，它会影响你的对齐，你可以检查小提琴和输出图像的工作演示

Fiddle

enter image description here

您网页的现场演示：

enter image description here

Answer 2

你的问题在于：

#spacer {
    height: 48px; }

将高度修改为25px或类似。

编辑：我建议你在所有项目中使用重置css表。

Answer 3

将 HTML标记和define in css一行vertical-align:middle更改为

HTML标记

<div id="menu">
    <ul>
    <li><a href="#">GAMESITES</a><span id="arrow"></span></li>
      <li id="spacer"> </li>
     <li><a href="#">HRY</a><span id="arrow"></span></li>
      <li id="spacer"> </li>
     <li><a href="#">SERVERY</a><span id="arrow"></span></li>
      <li id="spacer"> </li>
     <li><a href="#">CLANKY</a><span id="arrow"></span></li>
      <li id="spacer"> </li>
     <li><a href="#">FORUM</a><span id="arrow"></span></li>
      <li id="spacer"> </li>
     <li><a href="#">DOWNLOADS</a><span id="arrow"></span></li>
      <li id="spacer"> </li>
     <li><a href="#">BLOGY</a><span id="arrow"></span></li>
      <li id="spacer"> </li>
     <li><a href="#">FLASHOVKY</a><span id="arrow"></span></li>                                           
    </ul> 
  </div>

<强>的CSS

#menu ul li{vertical-align:middle;}

<强> Demo Link

Answer 4

1）你的标记无效。

你必须做那样的事情：

    <ul>
         <li><a href="#">GAMESITES<span id="arrow"></span></a></li>
          <li id="spacer"> </li>
...
<ul>

2）您的问题是<list id="spacer">的固定高度。 只需删除此属性即可。此外，由于spacer不是唯一的，因此将 id 更改为 CLASS 。

3）之后，在line-height

中添加#menu媒体资源

#menu {
  line-height: 3.5em;
}

CSS - 菜单文本移出背景

4 个答案:

Fiddle