Question

我的问题是我不想在盒子之间给出差距。

请建议如何消除此差距，谢谢：）

我的css

.menu:link,.menu:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
.menu:hover,.menu:active
{
background-color:#7A991A;
}

我的菜单PHP

<?php
echo '<a class="menu" href="/test/index.php">Home</a>
<a class="menu" href="/test/profile.php">Profile</a>
<a class="menu" href="/test/settings.php">Settings</a>
<a class="menu" href="/test/image.php">Image</a> 
<a class="menu" href="/test/logout.php">Logout</a>';
?>

Answer 1

删除链接标记之间的空白区域。

<强> jsFiddle example

<a class="menu" href="/test/index.php">Home</a><a class="menu" href="/test/profile.php">Profile</a><a class="menu" href="/test/settings.php">Settings</a><a class="menu" href="/test/image.php">Image</a><a class="menu" href="/test/login.php">Logout</a>

或

<a class="menu" href="/test/index.php">Home</a><!--
--><a class="menu" href="/test/profile.php">Profile</a><!--
--><a class="menu" href="/test/settings.php">Settings</a><!--
--><a class="menu" href="/test/image.php">Image</a><!--
--><a class="menu" href="/test/login.php">Logout</a>

或者只是将它们漂浮在左边

.menu {
    float:left;
}

Answer 2

你的字符串中有空格。

您可以参考以下方法创建字符串

其中$ url是href，$ displayText是显示文本

$menu .= sprintf('<a class="menu" href="%s">%s</a>' , $url , $displayText);

实施例

$menu = sprintf('<a class="menu" href="%s">%s</a>', '/test/index.php' , "Home");
$menu .= sprintf('<a class="menu" href="%s">%s</a>', '/test/profile.php' , 'Profile');
$menu .= sprintf('<a class="menu" href="%s">%s</a>', '/test/settings.php' , 'Settings');
$menu .= sprintf('<a class="menu" href="%s">%s</a>', '/test/image.php' , 'Image');
$menu .= sprintf('<a class="menu" href="%s">%s</a>', '/test/login.php' , 'Logout');

echo $menu ;

Answer 3

这里是您问题的简单解决方案：

不要在所有锚标签之间使用间隙。将它们保持在一条线上，没有任何间隙。你的问题将得到解决。

见下面的演示

Visit http://jsfiddle.net/creators_guru/6B9ea/

我怎样才能消除菜单框之间的差距

3 个答案: