douzhan6474 2011-11-28 01:01
浏览 86
已采纳

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

I'm trying to create a php navigation bar. I've come up with a nice looking scheme using the following code:

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>";
?>

and html:

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

How can I eliminate the space between the braces without giving up the nice tightly-fitting background padding? The <table> tag I've included is not necessary, it was just my latest attempt to get this to work.

screenshot showing spacing issue

[ Home ] I want to get rid of this space [ Site Map ]

screenshot showing highlighting

but I want to keep the tight fit of the highlighting

  • 写回答

4条回答 默认 最新

  • douhui3330 2011-11-28 01:25
    关注

    Here is a better way of doing it:

    The list of links in your navigation is just that— a list. Instead of using a table, use ul, or unordered list. In my example, I also used the nav element, which is HTML5. You could easily replace it with a div.

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

    Notice, I did not include the brackets in the markup. This is on purpose. Those brackets do not add to the content or meaning of the site, and should be in the domain of CSS.

    This is easily done with pseudo elements:

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

    You will lose some support with older versions of IE, but everyone, including IE users—and especially those using screen readers or with other accessibility issues—will benefit from the removal of superfluous spans. It will also degrade gracefully.

    Here is a demo.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥35 平滑拟合曲线该如何生成
  • ¥100 c语言，请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 自己瞎改改，结果现在又运行不了了
  • ¥15 链式存储应该如何解决
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站