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>标签不是必需的，这只是我最近尝试让它发挥作用。

screenshot showing spacing issue

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

screenshot showing highlighting

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

Answer 1

您可以在[span]中包装[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中受益。它也会优雅地降级。

这是demo。

Answer 3

删除“navbar”元素上的填充和大括号上的负边界。像这样：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

在导航栏中使用position：relative时删除水平间距

4 个答案:

在导航栏中使用p​​osition：relative时删除水平间距

4 个答案:

在导航栏中使用position：relative时删除水平间距