Question

在下面的列表中，跨距不会对齐到相应点的中心。我认为这是由第一和第二跨度之间的较大差距造成的。

HTML

<nav class="side-nav-right">
    <ul>
        <li class="bullet">
            <a data-scroll href="#center-splash"><span style="width: 66px; left: -80px;">Intro</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section1"><span style="width: 66px; left: -80px;">section1</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section2"><span style="width: 66px; left: -80px;">section2</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section3"><span style="width: 66px; left: -80px;">section3</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section4"><span style="width: 66px; left: -80px;">section4</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section5"><span style="width: 66px; left: -80px;">section5</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section6"><span style="width: 66px; left: -80px;">section6</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section7"><span style="width: 66px; left: -80px;">section7</span></a>
        </li>
    </ul>
</nav>

SCSS

.side-nav-right {
    display: block;
    position: fixed;
    top: 20%;
    right: 1rem;

    ul {
        list-style: none outside;

        li {
            margin-bottom: 1rem;

            a {
                color: transparent;
                display: block;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: $light-text;
                box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red;
                vertical-align: top;

                &.active {
                    background: #808080;
                    box-shadow: none;
                }
            }

            span {
                color: $light-text;
                position: absolute;
                background: rgba(0,0,0,0.7);
                display: none;
                padding: 0.25rem 0.5rem;
                border-radius: 3px;
                vertical-align: middle;
            }

            span:before {
                content:"";
                display:block;
                width:0;
                height:0;
                border:solid 5px;
                border-color:transparent transparent transparent rgba(0,0,0,0.7);
                position:absolute;
                right:-10px;
                top:9px
            }

            &:hover span {
                display: block;
            }
        }

        li:first-child a>span{top:-5px}
    }
}

@media only screen and (min-width: 1025px) {
    .side-nav-right {
        top: 30%;
        right: 2rem;

        ul {
            li {
                margin-bottom: 1.5rem;

                a {
                    width: 1.25rem;
                    height: 1.25rem;
                }
            }
        }
    }
}

vertical-align似乎无所作为，评论所有边距和填充不起作用。我不知道为什么这些元素不会排在第一个元素之外。

Answer 1

你反过来看着它。请注意，只有您的第一个元素设置了特定的top属性：

li:first-child a>span{top:-5px}

其他人没有。

只需对齐其他人，并调整第一个。

在Fiddle中，我给了所有跨度的边缘顶部并取消了对第一个孩子的特殊处理。可能只是在这个小提琴上工作，你的确切测量可能需要一些调整，如果这样正确的小提琴。

span {
        color: black;
        position: absolute;
        background: rgba(0,0,0,0.7);
        display: none;
        padding: 0.25rem 0.5rem;
        border-radius: 3px;
        vertical-align: middle;
        margin-top: -8px;
}

Answer 2

以下是不影响原始代码结构的解决方案：用跟随代码替换你的html：

<nav class="side-nav-right">
    <ul>
        <li class="bullet">
            <a data-scroll href="#center-splash"><span>Intro</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section1"><span>section1</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section2"><span>section2</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section3"><span>section3</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section4"><span>section4</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section5"><span>section5</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section6"><span>section6</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section7"><span>section7</span></a>
        </li>
    </ul>
</nav>

然后用以下代码替换你的css：

.side-nav-right {
    display: block;
    position: fixed;
    top: 20%;
    right: 1rem;

    ul {
        list-style: none outside;

        li {
            margin-bottom: 1rem;
            position:relative;

            a {
                color: transparent;
                display: block;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: $light-text;
                box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red;
                vertical-align: top;

                &.active {
                    background: #808080;
                    box-shadow: none;
                }
            }

            span {
                color: $light-text;
                position: absolute;
                background: rgba(0,0,0,0.7);
                display: none;
                padding: 0.25rem 0.5rem;
                border-radius: 3px;
                vertical-align: middle;
                width: 66px;
                left: -90px;
                top:-4px;
            }

            span:before {
                content:"";
                display:block;
                width:0;
                height:0;
                border:solid 5px;
                border-color:transparent transparent transparent rgba(0,0,0,0.7);
                position:absolute;
                right:-10px;
                top:9px
            }

            &:hover span {
                display: block;
            }
        }

        li:first-child a>span{top:-5px}
    }
}

@media only screen and (min-width: 1025px) {
    .side-nav-right {
        top: 30%;
        right: 2rem;

        ul {
            li {
                margin-bottom: 1.5rem;

                a {
                    width: 1.25rem;
                    height: 1.25rem;
                }
            }
        }
    }
}

列表中第一个和第二个元素之间的差距更大

2 个答案: