同样向内联块添加边界 [英] add border to inline-block equally

问题描述

https://jsbin.com/dazugonoli/1/edit?html ，css，输出

你们如何将边框添加到inline-block div？想象一下，我正在做一个日历，边框似乎重复，并在框的每一边都不相同。

How would you guys add border to inline-block div? Imagine I'm doing a calendar, the border seem repeated and not equal on each side of the box.

#parent{
  width: 400px;
}
#parent > div{
  display: inline-block;
  width:50px;
  height:50px;
  line-height:50px;
  background:cyan;
  border:1px solid;
  text-align:center;
}

<div id="parent">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

推荐答案

是使用 outline 而不是 border

#parent > div{
    display: inline-block;
    width:50px;
    height:50px;
    line-height:50px;
    background:cyan;
    outline: 1px solid;
    text-align:center;
  }

<div id="parent"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  </div>

这篇关于同样向内联块添加边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！