html - 如何在字符之间留出空格

Question

我正在我的电脑上制作一个网站，顶部有一个导航栏。那里的链接看起来像是句子的一部分，所以我试图在它们之间制造更大的差距。我尝试在<a></a>'s 之间使用空格，但空格没有出现在页面中。

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

像这样：

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

Answer 3

尝试这样做：

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

希望这可以帮助！！

Answer 4

最好使用<ul>s 和<li>s

家

规则

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

这是 jsfiddle 示例DEMO

Answer 5

尝试添加这个 css：

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

  }
</style>

Answer 6

试着把'nbsp;' 你想要空白的地方。 http://jsfiddle.net/NA4DB/

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