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

中工作

＆＃13;

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

＆＃13;

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

＆＃13;

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

添加填充以显示：table-cell

2 个答案: