table-单元格显示没有将内容居中

Question

我有一个显示水平按钮窗格的有序列表 (<ol>)。

为了避免按钮项垂直显示，我使用了属性、display: table-cell;。但是，现在所有项目都显示在左端。

jsfiddle 是@http://jsfiddle.net/42xt001j/

一张快照-

如何保证每个菜单项占ol宽度的三分之一？

添加额外的属性 width:33% 以垂直方式重新排列项目，这是不需要的。

Answer 1

您需要在容器 <ol>

上使用 display: table

Demo

li {
  display: table-cell;
  margin: 0 15px 0 0;
  border-right-style: dotted;
  color: blue;
  border-color: #000000;
}
ol {
  float: left;
  width: 27em;
  border: 4px solid black;
  margin: 5em auto;
  list-style: none;
  padding: 10px 0;
  text-align: center;
  display: table;
}
li:last-child {
  border-right-width: 0;
}

<ol>
  <li>Save suite</li>
  <li>Load suite</li>
  <li>Run suite</li>
</ol>

Answer 2

你需要在我提到的 css 中进行更改。

li {
   display: table-cell;
  margin: 0 15px 0 0;
  border-right-style: dotted;
  color: blue;
  border-color: #000000;
}
ol{
  display:table;  
  width: 27em;
  border: 4px solid black;
  list-style: none;
  Padding:10px;
  text-align:center;
}
li:last-child {
  border-right-width: 0;
}

table-单元格显示没有将内容居中

table-cell display doesn't center the contents

html

css

html-lists