設置部分<li>水平導航欄中的元素向右浮動 CSS 顛倒了它們的順序</li>
[英]Setting portions of <li> elements in horizontal nav bar to float right with CSS reverses their order
問題描述
我正在嘗試創建一個固定在頁面頂部的基本水平導航欄，其中包含 4 個鏈接。 我希望最后兩個鏈接位於導航欄的右側，編號為 CSS，但如果不顛倒最后兩個鏈接的順序，我似乎無法做到這一點。 我不想只切換 HTML 本身的最后 2 個 <li> 元素，因為屏幕閱讀器會以相反的順序讀取它。
這是我做的 CSS：
<stlye>
* {box-sizing: border-box;
padding: 0;
margin: 0;}
body {font-family: Helvetica, Arial, sans-serif;
color: #393939;}
header {font-size: 18px;}
ul.topnav {list-style-type: none;
margin:0;
padding-left: 300px;
padding-right: 300px;
overflow: hidden;
background-color: rgba(50, 150, 220, 1);
position: fixed;
top: 0;
width: 100%;}
ul.topnav li {float: left;}
ul.topnav li.right {float: right;}
ul.topnav li a {display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
ul.topnav li a:hover {background-color: rgb(200, 200, 200);}
ul.topnav li a.activetab {background-color: rgb(200, 200, 200);}
@media screen and (max-width: 600px) {ul.topnav li.right,
ul.topnav li {float: none;}}
main {margin-top: 50px;
height: 1500px;
text-align: center;
line-height: 2;}
</style>
這是我的 HTML：
<body>
<header>
<nav>
<ul class="topnav">
<li><a class="activetab" href="home">Home</a></li>
<li><a href="dashboard">Explore</a></li>
<li class="right"><a href="signup">Login</a></li>
<li class="right"><a href="login">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Homepage Test</h1>
<h2>Warning: work in progress</h2>
<h3>Notice how the navigation bar stays at the top of the page while scrolling</h3>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
<p>This is a test, nothing to see here...</p>
</main>
</body>
有更好/更有效的方法嗎？
我試過使用“display: flex;” 對於帶有元素和“justify-content: flex-end;”的 topnav class 在“右”class 中，最后兩個列表元素無濟於事。
1 個解決方案
解決方案1
0 已采納 2023-01-15 23:16:52
您可以將右側的元素包裹在一個span或其他東西中，並將span設置為具有float: right 。
（使用全屏以獲得最佳效果）
* {box-sizing: border-box; padding: 0; margin: 0;} body {font-family: Helvetica, Arial, sans-serif; color: #393939;} header {font-size: 18px;} ul.topnav {list-style-type: none; margin:0; padding-left: 300px; padding-right: 300px; overflow: hidden; background-color: rgba(50, 150, 220, 1); position: fixed; top: 0; width: 100%;} ul.topnav li {float: left;} ul.topnav span.right {float: right;} ul.topnav li a {display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;} ul.topnav li a:hover {background-color: rgb(200, 200, 200);} ul.topnav li a.activetab {background-color: rgb(200, 200, 200);} @media screen and (max-width: 600px) {ul.topnav li.right, ul.topnav li {float: none;}} main {margin-top: 50px; height: 1500px; text-align: center; line-height: 2;}
<body> <header> <nav> <ul class="topnav"> <li><a class="activetab" href="home">Home</a></li> <li><a href="dashboard">Explore</a></li> <span class="right"> <li><a href="signup">Login</a></li> <li><a href="login">Contact</a></li> </span> </ul> </nav> </header> <main> <h1>Homepage Test</h1> <h2>Warning: work in progress</h2> <h3>Notice how the navigation bar stays at the top of the page while scrolling</h3> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> <p>This is a test, nothing to see here...</p> </main> </body>
float：right反轉項目的順序
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.