Question

我正在尝试使用完全相同的像素数来分隔此菜单中的项目。在90年代，我认识的大多数Web开发人员使用空格或间隔gif。这些工作，但他们觉得我很糟糕。在2009年必须有更好的方法来做到这一点！我更像是一个后端编码器，所以我已经离开了一段时间。我很感激任何帮助...

<div class="menu">
  <a href="#">Item 1</a> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: (replaced the semicolon with a colon so that these would show up)
  <a href="#">Item 2</a> <img src="spacer.gif" />
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</div>

Answer 1

你可以在锚元素上抛出一个id / class并且有正确的填充。

<div class="menu">
  <a href="#">Item 1</a id="bar"> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
  <a href="#">Item 2</a> 
  <a href="#">Item 3</a>
  <a class="last" href="#">Item 4</a>
</div>

<style type="text/css">
#bar { padding-right:5px; }
</style>

如果你想在所有的锚点上找到更通用的东西，但是最后一个：

.menu a { padding:0 5px 0 0; }
.menu a.last { padding-right:0; }

Answer 2

当然使用CSS！

具体来说，既然您问过，请将样式应用于锚元素。类似的东西：

div.menu { width: 480px; } 

div.menu a{
  margin:0;
  display:block;
  float:left;
  width:120px;
}

可能会做你想要的。作为一个额外的好处，整个块将作为一个链接，所以你会得到更像按钮而不是文本链接的行为，这可能是你所追求的，因为它是一个菜单。如果窗口太窄，在.menu div上设置显式宽度将使浮动不会被包裹。

对于符合XHTML标准的固定间距，我最好的选择是什么？

2 个答案: