Я создал следующий компонент пользовательского интерфейса:
http://codepen.io/ac123/pen/xqYzxR
<div id="MapKeys">
<div id="RegionalSupply">
<div class="header">Regional supply</div>
<div class="circle"></div>
<div class="detail">Circles sized by the amount of change from the previous period</div>
</div>
<div id="CorridorNetFlowDirection">
<div class="header">Corridor net flow direction</div>
<div class="dottedLine">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
</div>
<div class="detail">Lines sized by the amount of change in net flow from the previous period</div>
</div>
</div>
#MapKeys
{
.header{
font-size:16px;
}
#RegionalSupply{
height:100px;
width:240px;
border:solid purple 1px;
display:inline-block;
padding:10px;
& > .circle {
width: 14px;
height: 14px;
background: lightgrey;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
display:inline-block;
}
& > .detail{
display:inline-block;
width:150px;
font-size:12px;
}
}
#CorridorNetFlowDirection{
height:100px;
width:240px;
border:solid red 1px;
display:inline-block;
padding:10px;
& > .dottedLine
{
& > .part1{
width: 12px;
height: 10px;
background: lightgrey;
display:inline-block;
}
& > .part2{
width: 1px;
height: 10px;
background: none;
display:inline-block;
}
& > .part3{
width: 12px;
height: 10px;
background: lightgrey;
display:inline-block;
}
}
& > .detail{
display:inline-block;
width:150px;
font-size:12px;
}
}
}
Компонент «Сетевое направление потока в коридоре» отображается серым значком, представляющим собой пунктирную линию. Я определил эту пунктирную линию как 3 смежных div со средним div, имеющим wdith:1px и background:none.
Однако внешний вид обработанной средней ширины div больше похож на 6px или 7px. Что мне нужно настроить в моем css или html, чтобы эта пунктирная линия отображала ширину 1px между 1-м и 3-м div?
Кроме того, как я могу указать общие атрибуты css для части 1, части 2, части 3 в этом сценарии? Например, я ожидал, что следующий общий стиль будет работать, но это не так:
& > .dottedLine
{
height: 10px;
display:inline-block;
& > .part1{
width: 12px;
background: lightgrey;
}
& > .part2{
width: 1px;
background: none;
}
& > .part3{
width: 12px;
background: lightgrey;
}
}