Как мне сделать на кнопки один и тот же размер

Question

Я пытаюсь получить кнопки, которые все же размера, но я новичок и поэтому застрял, вот мой CSS код:

.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/ Обратите внимание на кнопки? Они все одинаковые, как я хочу. А также, как я сосредотачиваю фактические кнопки, а не только текст?

Answer 1

Наконечник: установка тестового примера в JSFiddle даст людям более четкое представление о вашей проблеме и, таким образом, даст вам ответ.

Сказав, что вы хотите использовать display: block вместо inline, а затем установить ширину:

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

}