CODEWITHSUNDEEP
css
user3022359
user3022359

Reputation: 59

How do I make buttons the same size

I'm trying to get buttons that are all the same size, however I'm new and therefore stuck, here's my CSS code : 

.bannerArea nav ul li{
    list-style:none;    
    display:inline;
    padding: 10px 30px;
    background-color:#0C0C0C;
    opacity:0.7;
    text-align:center;
    text-shadow:none;
}

http://www.webpagetemplates.org/web-page-templates/download/preview/wpt0054/ Notice the buttons ? They are all the same size, like I want. And also, how do I center the actual buttons and not just the text?

Upvotes: 0

Views: 80

Answers (1)

Dre
Dre

Reputation: 2953

Top tip: putting a test case into a JSFiddle will give people a clearer idea of your problem, and thus provide you with an answer.

Having said that, you want to use display: block instead of inline and then set a width:

.bannerArea nav ul li{
    list-style:none;    
    display:block;
    width: 25%; /* Adjust this accodringly */
    padding: 10px 30px;
    background-color:#0C0C0C;
    opacity:0.7;
    text-align:center;
    text-shadow:none;

}

Upvotes: 1

Related Questions