Sponser Link
Sponser Link
目次
端のliの要らないmarginをulのマイナスmarginで相殺する
ul display: flex;
CSS
.list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin-left: -60px;
margin-top: -60px;
}
li
CSS
.list.col-2 li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: calc(50% - 60px);
}
.list .list-item {
background: #fff;
border: 1px solid #e3deda;
margin-left: 60px;
margin-top: 60px;
}
Sponser Link
端のliにだけborderをつけない場合
li
CSS
.nav-list__item+.nav-list__item {
border-left: 1px dotted #ccc;
}
Sponser Link
navのliにwidthを指定せずに綺麗に整える方法
liにflex-glow:1;
CSS
.nav-list__item {
-webkit-box-flex: 1;
flex-grow: 1;
-ms-flex-positive: 1;
position: relative;
text-align: center;
}
Sponser Link