的CSS按钮定位没有按钮

我想我的定位导航直列之间的空间，但没有按键之间的空间。你可以建议一些小费如何将它们在页面的中间位置为好。我曾尝试与margin:0, padding-left:0px但仍然有它们之间的空间。下面是HTML代码：的CSS按钮定位没有按钮

<div id="nav"> 
<nav role="navigation"> 
<ul> 
<li><a href="./" class="button" title="Go to the home page"</title>Home</a></li> 
<li><a href="about.php" class="button">About</a></li> 
<li><a href="contact.php" class="button">Contact</a></li>  
</ul></nav></div>

和CSS样式：

.button{ 
color: rgb(0, 0, 0); 
font-size: 15px; 
padding: 11px; 
    text-shadow: 0px 2px 2px rgba(144,150,150,0.75); 
    background: rgb(255, 255, 248); 
    background: -moz-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%); 
    background: -webkit-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%); 
background: -o-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%); 
background: -ms-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%); 
background: linear-gradient(0deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%); 
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73); 
-moz-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73); 
box-shadow:   0px 2px 1px rgba(50, 50, 50, 0.73); 
    } 
#nav li{ 
display:inline; 
} 

#nav ul{ 
list-style-type:none; 
margin:0; 
    } 
#nav ul li a{text-decoration:none; 
font:Tahoma, Helvetica, Arial, sans-serif; 
letter-spacing:0.1em; 

}

来源

2013-02-07 C0ld

首先到中心您导航到屏幕采用波纹管的中间。

#nav{ 
     width:960px; -- change me to correct size 
     margin-right:auto; 
     margin-left:auto; 
     height:110px; -- change me! 
}

至于列表，这将采取列表，并从左到右排列。链接之间唯一的差距应该是小填充因此它不会对彼此的顶部看。

#nav ul { 
    display: inline; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
} 

#nav li { 
    display: inline; 
    font-size: 11px; 
    padding-right: 2px; 
    padding-left: 2px; 
    width: 100px; -- this depends on the number of buttons you have of course. 
}

希望这会有所帮助！

来源

2013-02-07 23:23:59

在您#nav li，使用display: block和float: left代替，就像这样：

#nav li { 
    display: block; 
    float: left; 
}

见DEMO。

来源

2013-02-07 23:21:28 zakangelle

如果要在无空格和空格的情况下显示它，请尝试使用letter-spacing或word-spacing，并使用负值

来源

2013-02-07 23:25:12 pwolaq

的CSS按钮定位没有按钮

回答

相关问题