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

我試圖水平對齊<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。

來源

2016-08-24 T.J.

如果你想添加填充向左或向右.toolbar UL李一{填充：0 5px的;} –

我這樣做，但它實際上並沒有創造的元素之間填充，只是增加了寬度： https://jsfiddle.net/as3js51m/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>

來源

2016-08-24 14:39:27 dippas

我這樣做，但它不會添加元素之間的填充，只是增加框高/寬度：https://jsfiddle.net/as3js51m/1/ –

你運行我的snippet至少？，在這個小提琴中你根本沒有任何'padding' – dippas

我做過，但是元素之間沒有填充。我不確定我是否清楚。我期待把它們變成兩個不同的塊。 –

工作添加填充入你的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

來源

2016-08-24 14:51:08 Fiido93

您是否至少閱讀過OP評論？「我期待把它們變成兩個不同的方塊」 – dippas

是的，今天早上我有一個嚴重的愚蠢案例。謝謝大家幫我一把。 –

我沒讀過那部分哈哈 – Fiido93

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

回答

相關問題