行内块元素的运用

场景

底部分页灯，一行多个元素排列

使用

html

<div class="box>
  <a href="#" class="prev">&lt;&lt;上一页</a>
  <a href="#">1</a>
  <a href="#" class="current">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#" class="elp>...</a>
  <a href="#" class="prev">下一页&gt;&gt;</a>
  到第
  <input type="text">
  页
  <button>确定</button>
</div>

css

* {
  margin: 0;
  padding: 0;
}
.box {
 /*  盒内元素全部水平居中 */
  text-align: center;
}
·box a {
  /* 关键，使用行内块元素排列，元素间有间隙 */
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  /*   文本居中 */
  text-align: center;
  line-height: 36px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}
.box .prev, .box .next {
  width: 85px;
}
.box .current, .box .elp {
  background-color: #fff;
  border: 0;
}
.box input {
  height: 36px;
  width: 45px;
  border: 1px solid #ccc;
  outline: none;
}
.box button {
  height: 36px;
  width: 45px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}