垂直（在元素之上，之下和元素之间）分配空的空间

Question

我发现this topic关于垂直分布三个具有固定高度的空间的图像。

我想在固定高度的空间上分布三个按钮，但我需要空的（红色）空间分别在元素之间和顶部和上方分别平均分布。这是我的代码：

<-- HTML --> 
<ul id="button-list"> 
<li><span><button>1st button</button></span></li> 
<li><span><button>2nd button</button></span></li> 
<li><span><button>3rd button</button></span></li> 
</ul> 

<-- CSS --> 
#button-list { display:table; height:150px; background: red} 
#button-list button { width: 100%; display:block } 
#button-list li { display:table-row } 
#button-list li span { display:table-cell; vertical-align:middle; background:red } 
#button-list li:first-child, 
#button-list li:last-child { height:20px } 

这是changed fiddle。任何想法？

p.s：我试过没有<span>标签的代码，因为我认为<button>标签可以代替它们。它没有工作，为什么？

Answer 1

停止使用display:table表示除表格数据Fede9390之外的任何内容。
这与使用<table> s一样糟糕。如果人们会停止使用表格和display:table进行布局，我们可能会看到诸如排序，分页和智能过滤器等功能，这些功能从浏览器的表格开箱即用，但他们甚至没有考虑到这些功能，因为它们会弄乱很多页面使用表格进行布局。

可以使用flexbox实现自己的目标：

#button-list { 
    height: 150px; 
    background: red; 
    display: inline-flex; 
    flex-direction: column; 
    justify-content: space-around; 
} 

当您完成后，不要忘记通过Autoprefixer运行你的CSS。如果你想这在具有超过0.01％的市场份额的任何浏览器中运行，上面的代码变成：

#button-list { 
    height: 150px; 
    background: red; 
    display: -webkit-inline-box; 
    display: -webkit-inline-flex; 
    display: -moz-inline-box; 
    display: -ms-inline-flexbox; 
    display: inline-flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
     -moz-box-orient: vertical; 
     -moz-box-direction: normal; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    -webkit-justify-content: space-around; 
     -ms-flex-pack: distribute; 
      justify-content: space-around; 
} 

Answer 2

如果你简单的擦除#img-list li:first-child, #img-list li:last-child { height:20px }和#img-list li:first-child,#img-list li:last-child { height:20px }，你可以用代码获得所需的结果（表格东西）您已经在使用：

http://jsfiddle.net/jhLhhf1u/2/