css li背景问题

问题描述

| 我有一个带有背景的垂直菜单。我需要将背景从顶部向右移到中间，但是无法做到这一点。 http://www.tiikoni.com/tis/view/?id=b0b07d2

ul.nav 
{
 margin:0; background-position:center;  background-image: url(../images/nav_bg.gif);font-family: \"Century Gothic\"; height:40px; padding-left:30px;
} 
ul.nav  a{ 
height:19px;color:white;display:inline-block;font-family:Century Gothic,Arial;font- size:14px;padding:8px 20px 0 ;text-decoration:none !important;vertical-align:middle;
}
ul.nav  a:hover
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;background-image: url(../images/nav_over.gif);
background-position: center top;background-repeat: no-repeat;text-decoration:none !important;vertical-align:middle;
}
* html ul.nav a
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
 ul.nav  a.highlight{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
ul.nav li{
    display: inline;
    color:#FFF;
    background-image: url(../images/white_dotline.gif);
    background-repeat: no-repeat;
    background-position:right center;
    font-size:14px;
    padding:8px 1px;
    font-family:\"Century Gothic\";
    height:19px;
    [height:19px;
    height:20px;]/*Google Chrome,Opera and newer Safary 4+*/
    }

    

解决方法

        水平和垂直位置由

background-position

属性控制。第一个数字定义水平位置，第二个数字定义垂直位置。 单词可以用于水平，例如

left

，

right

和

center

，而垂直方向可以是

top

，

bottom

和

center

。也可以使用绝对位置，例如像素或ems以及百分比。 例如：

background-position: right top; /* positioned to the right and the top */
background-position: 100% 0; /* positioned 100% to the right and zero from the top (the same as above) */
background-position: 50px 200px; /* positioned 50px from the left and 100px from the top */

    ,        您已经为背景位置指定了一个值，这意味着它用于水平位置，并且垂直位置设置为50％。您应该指定两个值来控制两个位置。例：

background-position: left center;