Imran Omer Imran Omer - 1 year ago 47
CSS Question

Links Overlap Eachother Issue

The links are overwrite each other, screenshot is: enter image description here

The CSS I've used is:

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

In case any one wants to see the HTML of these links, here is the 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>';

How can I adjust it so the links are properly adjusted and are not overwrite each other?


Answer Source


.moderation_buttons a{ display: inline-block }

Anchor tags are not block elements that's why the paddings are not being added to the anchor tag. In order to do that you should make it a block level element. But since you want it in inline too use display: inline-block style.