如何在角色之间留出空间

Question

我正在计算机上创建一个网站，顶部有一个导航栏。那里的链接看起来像是句子的一部分，所以我试图在它们之间做出更大的差距。我尝试在<a></a>之间使用空格，但空格没有显示在页面中。

HTML（导航栏）：

<div id='header'>
  <img id='tlogo' src="http://i.imgur.com/lVbnNwy.png?1">
  <a class="dif2" href="http://localhost:8080/Howl/Home.html">Home</a>
  <a class="dif2" href="http://localhost:8080/Howl/Rules.html">Rules</a>
</div>

导航的屏幕截图。条：

Answer 1

你可以添加CSS

  #header a{
     display:block;
     padding:8px 16px;

  }

Answer 2

尝试这样做：

#header a{
    display: inline-block;
    padding: 10px; /*You can you whatever padding depending on your site*/
}

希望这会有所帮助!!

Answer 3

尝试放入'nbsp;'你想要空的地方。        http://jsfiddle.net/NA4DB/

   <div>Hello</div>
   <div>&nbsp;</div>
   <div>World</div>

Answer 4

尝试添加此css：

<style>
#header a{
     display:inline;
     padding:10px 15px;

  }
</style>

Answer 5

最好使用<ul>和<li>            

主页

      

规则

    

 <style>
 ul.menu li {
 display:inline-block;
 padding:0px 5px 0px 0px;
 }
 </style>

这是jsfiddle示例DEMO

Answer 6

像这样：

<div id='header'>
  <img id='tlogo' src="http://i.imgur.com/lVbnNwy.png?1">
  <a class="dif2" href="http://localhost:8080/Howl/Home.html">Home</a>
  <a class="dif2" href="http://localhost:8080/Howl/Rules.html">Rules</a>
</div>

下面的样式：

#header > a {
  float:left
  margin-left:5px;
}