Question

我想将导航内联，但按钮之间没有空格。您可以建议一些提示如何将它们放在页面中间。我试过margin:0, padding-left:0px，但它们之间仍有空间。这是html代码：

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

 }

Answer 1

在#nav li上，请改为使用display: block和float: left，如下所示：

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

请参阅DEMO。

Answer 2

首先将导航中心置于屏幕中间使用下方。

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

希望这有帮助！

Answer 3

如果您想在没有内联空格的情况下显示内联空间，请尝试使用带有负值的letter-spacing或word-spacing

Css按钮定位按钮之间没有空格

3 个答案: