css - 链接重叠问题

Question

链接互相覆盖，截图为:

我使用的 CSS 是:

.moderation_buttons a:link, .moderation_buttons a:active, .moderation_buttons a:visited{
padding: 1px 9px;
background: #d6d6d6;
color: #000;
margin: 3px;
text-decoration: none;}

如果有人想查看这些链接的 HTML，这里是 HTML:

// Working on the Moderation Buttons
$view_profile = '<a href="index.php?action=profile_student&amp;sid='.$sid.'">VIEW PROFILE</a>';
$edit = '<a href="index.php?action=edit_student&amp;sid='.$sid.'">EDIT</a>';
$delete = '<a href="index.php?action=delete_student&amp;sid='.$sid.'">DELETE</a>';
$cancel = '<a href="index.php?action=cancel_student&amp;sid='.$sid.'">CANCELATION</a>';
$admission_form = '<a href="index.php?action=cancel_student&amp;sid='.$sid.'">ADMISSION FORM</a>';
$promote = '<a href="index.php?action=promote_student&amp;sid='.$sid.'">PROMOTE</a>';
$fee = '<a href="index.php?action=fee_print_student&amp;sid='.$sid.'">FEEs</a>';

$moderation_buttons = '<div class="moderation_buttons">'.$view_profile.$edit.$delete.$cancel.$admission_form.$promote.$fee.'</div>';

我该如何调整它，以便正确调整链接并且不会相互覆盖？

谢谢

Answer 1

设置

.moderation_buttons a{ display: inline-block }

anchor 标记不是 block 元素，这就是填充没有被添加到 anchor 标记的原因。为此，您应该将其设为 block 级元素。但是，由于您也希望内嵌它，因此请使用 display: inline-block 样式。