Question

I’m trying to find the answer to a problem I have. What I have is many buttons and I want them to appear down the page and all be the same width. I have the following code and CSS. However they don’t appear to be the full width. What I want ideally is them to be a width equal to the enclosing DIV. I also want the text to appear centered which it does now. Can anyone tell me why the buttons all appear different widths?

I have the following code:

<div style="width: 200px;">
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test  sadfadsfdsafsadfsa</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test  afds</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test asdfdsafadsfdsfasdfsadfdsf</a>
  </div>
</div>

and the following CSS:

.abc {
    float: left;
    height: 25px;
    padding-top: 4px;
    text-align: center;
    width: 190px;
}

a.btn {
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    cursor: default;
    font-size: 12px;
    padding: 3px 4px;
    text-decoration: none;
    width: 180px;
}

I created a fiddle

fiddle

Answer 1

If you want to specify the width of an a tag you need to set it to display: block