Question

我创建了以下UI组件：

<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;
        }
    }
}

＆＃34;走廊净流方向＆＃34;组件显示灰色图标，表示虚线。我将这个虚线定义为3个相邻的div，中间的div有wdith：1px和background：none。

然而，渲染的中间div宽度的外观看起来更像是6px或7px。我需要在css或html中调整什么才能使这条虚线在第1和第3个div之间显示1px的宽度？

另外，如何在此场景中为part1，part2，part3指定共享css attrs？例如，我希望以下共享样式可以工作，但它没有：

& > .dottedLine
{
    height: 10px;
    display:inline-block;

    & > .part1{
        width: 12px;
        background: lightgrey;
    }

    & > .part2{
        width: 1px;
        background: none;
    }

    & > .part3{
        width: 12px;
        background: lightgrey;
    }
}

Answer 1

当您完全避免/删除HTML代码中的任何空格以及DIV之间的换行符时，您可以获得1px距离（没有额外空间）。所以代码的一部分是：

<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>

在此处查看：http://codepen.io/anon/pen/aJqaxN

Answer 2

只需将font-size: 0px;添加到名为.dottedLine

的父容器中

.dottedLine{
font-size:0px;
}

Answer 3

将font-size: 0px;设为父容器.dottedLine

.dottedLine{font-size:0px;}

将此div宽度设置为1px时遇到问题？

3 个答案: