添加填充以顯示：表格單元

Question

我試圖水平對齊<li>元素，同時讓它們在100px的100px框內垂直對齊。但是我還想在每個元素之間添加padding。

這裏是Fiddle

.toolbar ul { 
 
    display: table-row; 
 
} 
 
.toolbar ul li { 
 
    display: table-cell; 
 
    height: 100px; 
 
    list-style-type: none; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: red; 
 
    margin: auto; 
 
} 
 
.toolbar ul li a { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 100px; 
 
}

<div class="toolbar"> 
 
    <ul> 
 
    <li><a href="#">Kids<br /> 
 
       Grades 0-6 
 
      </a> 
 
    </li> 
 
    <li><a href="#">Teens<br />Grades 7-12</a> 
 
    </li> 
 
    </ul> 
 
</div>

基本上，我在尋找同樣的事情，但每一個元素之間的一些padding。

Answer 1

我不知道我是否清楚。我希望把他們分成兩個截然不同的 塊

所以你可以使用border-spacing，因爲margin不會table-cell

.toolbar ul { 
 
    display: table; 
 
    border-spacing: 5px; 
 
    border: black 1px solid; 
 
    padding:0 
 
} 
 
.toolbar ul li { 
 
    display: table-cell; 
 
    height: 100px; 
 
    list-style-type: none; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 
.toolbar ul li a { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 100px; 
 
}

<div class="toolbar"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Kids<br /> 
 
       Grades 0-6 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Teens<br />Grades 7-12</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

工作添加填充入你的CSS

.toolbar ul li { 
    display: table-cell; 
    height: 100px; 
    list-style-type: none; 
    vertical-align: middle; 
    text-align: center; 
    border: 1px solid black; 
    margin: auto 10px; 
    padding: 20px; 
} 

DEMO