I am struggling to align a group of hyperlinks horizontally within a td element. Currently, they are displaying vertically due to my use of
display : block;
While I understand that using ul and li elements would be the proper way to achieve this, I am looking for an alternative solution. Is there a way to align these hyperlinks next to each other without restructuring my HTML?
This is the CSS I am currently using:
.homehyperlink {
width:90px;
height:50px;
color:#CCCCCC;
text-align:center;
line-height: 50px;
display: block;
font-size: large;
font-weight: 700;
font-family:'Palatino Linotype';
}
.homehyperlink:hover {
width:90px;
height:50px;
color:#FFFFFF;
text-align:center;
line-height: 50px;
display: block;
background-color:#FB2020;
font-weight:bolder;
font-family:'Palatino Linotype';
}
.homehyperlink:active {
width:90px;
height:50px;
color:#FFFFFF;
text-align:center;
line-height: 50px;
display: block;
background-color:#FB2020;
font-weight:bolder;
position: relative;
top: 1px;
font-family:'Palatino Linotype';
}
.munmaintable1234 {
text-align:left;
background-color: #333333;
height:50px;
}
Below is how I have structured the links:
<td class="munmaintable1234" colspan="4">
<asp:HyperLink ID="HyperLink4" runat="server" class="homehyperlink" NavigateUrl="~/test.aspx">HOME</asp:HyperLink>
<asp:HyperLink ID="HyperLink1" runat="server" class="homehyperlink" NavigateUrl="~/test.aspx">HOME</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" class="homehyperlink" NavigateUrl="~/test.aspx">HOME</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" class="homehyperlink" NavigateUrl="~/test.aspx">HOME</asp:HyperLink>
</td>