css - 如何在非引导导航栏中分隔和对齐 (LI) 链接

Question

如何对齐顶部导航栏中的链接。我明白试图定位 li链接比使用 <divs> 困难得多.

代码:HTML 和 CSS
示例:4 x 图(A、B、C、D)+ fiddle 详述如下
导航栏属性:固定(顶部)和响应式 - 移动 View < 800 像素，Width=100%
fiddle : https://jsfiddle.net/tqam2sbd/

A - 当前 - 常规 View (>800px)
|链接 1 |链接 2 |链接 3 |链接 4 |链接 5 | 空间 |链接 7 |链接 6 |

B - 当前 - 响应式堆叠 View (<800 像素)
|链接 1 |
|链接 2 |
|链接 3 |
|链接 4 |
|链接 5 |
|链接 6 |
|链接 7 |

C - Current - Regular View WITHOUT class="right"对于 LINK 6 & 7 (>800px)
|链接 1 |链接 2 |链接 3 |链接 4 |链接 5 |链接 6 |链接 7 |

D - 预期/期望 - 常规 View (>800px)
| 开始空间 |链接 1 | 空间 |链接 2 |链接 3 |链接 4 |链接 5 | 空间 |链接 6 |链接 7 | 空间尽头 |

Q1 - 如何实现导航栏的 Diagram D 表示？

CSS 代码

    ul.topnav {
    margin: 0;
    padding: 0;
    background-color: #2F2E2E;
    overflow: hidden;
    list-style-type: none;
    width: 100%;
    position: fixed;
    top: 0;
}

ul.topnav li {
    margin: 0;
    padding: 0;
    float: left;
}

ul.topnav li a {    
    margin: 20px;
    padding: 0;
    color: #FFFFFF;
    overflow: hidden;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
}

ul.topnav li a:hover {
    color: #B0AAA9;
    transition: 0.3s;
}

ul.topnav li a.active {
    color: #B0AAA9;
}

ul.topnav li.right {
    float: right;
}

@media screen and (max-width: 800px){
    ul.topnav li.right,
    ul.topnav li {
        float: none;
}
}

HTML

<nav>
    <ul class="topnav">
        <li class="first"><a href="#">allegiance</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">programs</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">faq</a></li>
        <li class="right"><a href="#">login</a></li>
        <li class="right"><a href="#">register</a></li>
    </ul>
</nav>  

Answer 1

这是使用 display: flex; 的一个很好的例子。 CSS 技巧有一个方便的 visual reference轻松查看哪些属性可以满足您的需求。

我对您的 html 做了一些更改，我决定将每个“组”项视为其自己的列表项，并将其他列表项组合在一起。我还在页面内容之前添加了一个 div 以将其向下推到导航栏下方。

然后，通过添加以下规则，您的导航栏空间将按需要工作。 Updated fiddle here .

ul.topnav {
    display: flex;
    justify-content: space-around;
    padding: 5px;
    width: calc(100% - 10px);
}
ul.topnav a {
    display: inline-block;
}
.navspace {
    height: 45px;
}

@media screen and (max-width: 800px) {
    ul.topnav {
        display: inherit;
        position: static; //a fixed navbar on mobile of this size makes the page unusable. 
    }
    ul.topnav a {
        display: block;
    }
    .navspace {
        height: 0;
    }
}