同样为内联块添加边框

时间:2017-03-15 05:17:22

标签: html css css3

https://jsbin.com/dazugonoli/1/edit?html,css,output

你们如何为内联块div添加边框?想象一下,我正在做一个日历,边框似乎重复,并且在框的每一边都不相等。



#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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:4)

最简单的解决方案是使用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>

答案 1 :(得分:1)

为元素添加负边距

#parent {
  width: 400px;
}

#parent>div {
  margin: -1px 0 0 -1px;
  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>

答案 2 :(得分:0)

您可以在顶部和左侧(或右侧和底部)添加负边距:

margin: -1px 0 0 -1px;

答案 3 :(得分:0)

如果最后一行包含与前一行相同或更少的元素,则工作。而且当你知道一行中的元素数量时 - 你不使用包装。

&#13;
&#13;
#parent > div{
  display: flex;      
}

#parent > div > div{
  display: flex;
  width:50px;
  height:50px;
  line-height:50px;
  background:cyan;
  justify-content:center;
  align-items: center;

  border-bottom:1px solid;
  border-right:1px solid;
}

#parent > div:first-child > div {
   border-top: 1px solid;
}

#parent > div > div:first-child {
   border-left: 1px solid;
}
&#13;
<div id="parent">
  <div>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>
  <div><div>8</div><div>9</div><div>10</div></div>
</div>
&#13;
&#13;
&#13;