Search code examples
csshtmlanchor

display anchor tag to full width as a button in HTML?


this is small code for side menu of my page

<div style="display: block;" id="overlay" class="overlay">
    <div id="sideMenuGroups">
    <div id="sideMenuGroupHeader" class="mSideMenuSeparator">GROUPS</div>
      <div id="sideMenuGroupContent" class="mSideMenuContent">
           <div id="teacherGroup">As Teacher
             <a onclick="groupFeeds();" href="#">Data Mining</a>
             <a onclick="groupFeeds();" href="#">Data Structures</a>
             <a onclick="groupFeeds();" href="#">C Language</a>
              //**display anchor tag to full width of overlay**
             <a onclick="groupFeeds();" href="#">Introduction to IT</a>
           </div>
          </div>  
    </div>
    </div><!--overlay ends here-->

the css for the styles used is

*mSideMenuConten*t has no style defined

mSideMenuContent a- tells how each anchor tag would be visible, i have tried display:table-cell property, but it is not effective for me

overlay tells how the side menu would be

.mSideMenuContent
{

}
.mSideMenuContent a
{
    display: table-cell;
    height: 37px;
    color: #c4ccda;
    padding: 3px 0 3px 8px;
    font-size: small;

}
.mSideMenuContent a:hover
{
  background:#262c3a;
  color: #c4ccda;
}   
.mSideMenuSeparator
{
    background: #434b5c;
    border-top: 1px solid #242a37;
    border-bottom: 1px solid #242a37;
    font-family:Helvetica, sans-serif;
    font-size:x-small;
    color: #7a8292;
    height:17px;
    padding-top:4px;
    padding-left: 10px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6)
}
    .overlay {
    z-index: 1000;
    position: absolute; 
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background:#31394a;;
    color: #c4ccda;
    display: none;
}

i want to display the anchor tag to full width of the side menu, how do i do that??


Solution

  • Use this:

    display:inline-block;
    width: 100%;
    

    By saying inline block, you allow yourself to define a width for the element. Inline elements can't do this be default.