使用导航栏中的相对位置时删除水平间距

Question

我正在尝试创建一个PHP导航栏。 我使用以下代码提出了一个漂亮的方案：

CSS：

a.navbar:link    { color:#AAAAFF; text-shadow:none; 
             padding: 5px 12px; white-space:nowrap; font-size:15px;}
a.navbar:visited { color:#AAAAFF; text-shadow: #4444FF 0.0px 0.0px 2px}
a.navbar:hover   { color:#CCCCCC; background:#444488;  } 
a.navbar:active  { color:grey; }
a.navbar {padding:none; font-size:15px;}

span.leftbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; right:-9px;  bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; left:-9px;  bottom:-3.75px;}

PHP：

<?php
echo "<center>";
$links = array('Home'=>'index.htm', 'Site Map'=>'sitemap.htm');
$leftbrace = "<span class=leftbraces>[</span>";
$rightbrace = "<span class=rightbraces>]</span>";
foreach ($links as $key => $value) {
    echo "$leftbrace<a class=navbar href=\"$value\">$key</a>$rightbrace";
}
echo "</center>";
?>

和html：

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<?php include 'navbar.test.php';?>
</html>

如何在不放弃紧密贴合的背景填充的情况下消除括号之间的空间？ 我包含的<table>标记不是必需的，这只是我最近一次尝试使其生效。

屏幕截图显示间距问题

[主页]我想摆脱这个空间[网站地图]

屏幕截图显示突出显示

但我想保持突出显示的紧密配合

Answer 1

您可以将[Home]和[Site Map]包裹在一起。 将此包装的边距设置为-8px。

http://jsfiddle.net/wkS6H/

旁注：由于您正在显示静态内容，因此回声效率很低。 这将导致服务器在每个页面请求中重现相同的输出。

Answer 2

这是一种更好的方法：

导航中的链接列表就是列表。 代替使用表，而使用ul或无序列表。 在我的示例中，我还使用了nav元素，即HTML5。 您可以轻松地将它替换为div 。

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Site Map</a></li>
</ul>

注意，我没有在标记中包括方括号。 这是故意的。 这些括号不会增加网站的内容或含义，而应在CSS范围内。

这可以通过伪元素轻松完成：

nav a:before {content:'['; display:inline;}
nav a:after {content:']'; display:inline;}

您将失去对旧版本IE的支持，但是所有人（包括IE用户），尤其是使用屏幕阅读器或其他可访问性问题的用户，都将从删除多余的span受益。 它也会正常降级。

这是一个演示。

Answer 3

删除“导航栏”元素上的填充以及括号中的负边界。 像这样： http : //jsfiddle.net/kDq29/1/ 。

还要注意HTML标记中的错误。

编辑：我忘记了从chrome保存更改。 现在更新。

Answer 4

'] [[]空间是由括号的左，右，底部属性引起的。

span.leftbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; right:-9px;  bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; left:-9px;  bottom:-3.75px;}

删除位置属性，并通过其唯一属性对齐文本。 -访问： http ： //jsfiddle.net/fPty7/1

使用导航栏中的相对位置时删除水平间距

问题描述

4 个解决方案

解决方案1
2 2011-11-28 01:14:27

解决方案2
2 已采纳 2011-11-28 01:25:55

解决方案3
0 2011-11-28 01:10:51

解决方案4
0 2011-11-28 01:13:10

使用导航栏中的相对位置时删除水平间距

问题描述

4 个解决方案

解决方案1 2 2011-11-28 01:14:27

解决方案2 2 已采纳 2011-11-28 01:25:55

解决方案3 0 2011-11-28 01:10:51

解决方案4 0 2011-11-28 01:13:10

解决方案1
2 2011-11-28 01:14:27

解决方案2
2 已采纳 2011-11-28 01:25:55

解决方案3
0 2011-11-28 01:10:51

解决方案4
0 2011-11-28 01:13:10