Question

如何对齐顶部导航栏中的链接。我理解尝试定位li链接比使用<divs>要困难得多。

代码： HTML＆amp; CSS
示例： 4 x图（A，B，C，D）+小提琴详述如下 导航栏属性：固定（顶部）＆amp;响应 - 移动视图＆lt; 800px，Width=100%
小提琴： https://jsfiddle.net/tqam2sbd/

A - 当前 - 常规视图（＆gt; 800px）
|链接1 |链接2 |链接3 |链接4 |链接5 | 空格 |链接7 |链接6 |

B - 当前 - 响应式堆叠视图（＆lt; 800px）
|链接1 |
|链接2 |
|链接3 |
|链接4 |
|链接5 |
|链接6 |
|链接7 |

C - 当前 - 没有class="right"的常规视图对于LINK 6＆amp; 7（> 800px）
|链接1 |链接2 |链接3 |链接4 |链接5 |链接6 |链接7 |

D - 预期/期望 - 常规视图（＆gt; 800px）
| START-SPACE |链接1 | 空格 |链接2 |链接3 |链接4 |链接5 | 空格 |链接6 |链接7 | END-SPACE |

Q1 - 如何实现导航栏的图表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做了一些修改，我决定对待每个＆＃34; group＆＃34;项目作为自己的列表项目并组合其他列表项目。我还在页面内容之前添加了一个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;
    }
}

如何摆出空间＆amp;在非引导程序导航栏中对齐（LI）链接

1 个答案: