CODEWITHSUNDEEP
htmlcsshyperlinkalignment
RelatedRhymes
RelatedRhymes

Reputation: 428

Hyperlinks with display block cannot be horizontally aligned

I have a bunch of hyperlinks which i want to align horizontally in a td.The problem is that they getting aligned vertically.Is it because i am using 

 display : block;

I know i should be using ul, li etc but what if i dont wish to? So help me out here.I just want to align these bunch of hyperlinks side by side.

My CSS :

   .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;
      }

Here is how i am arranging them 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>

Upvotes: 0

Views: 59

Answers (1)

Nikhil Batra
Nikhil Batra

Reputation: 3148

Change 

display:block

to

display :inline-block

In 

.homehyperLink

Upvotes: 2

Related Questions