Question

每个人的问候和致意，

此双堆栈导航的顶部菜单向后显示结果。我试过造型

<li>'s

单独地，或者它不起作用或我做错了。我也拉了很多头发，但那也没用。：D有人能解开一些光吗？非常感谢！

<!DOCTYPE html>
<html>
<head>
<!--From secondary Nav - find out what this does-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin:0;}
ul.PrimaryNav {list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#000;text-transform:uppercase;}
ul.PrimaryNav li {float:right;color:#FFFFFF;}
ul.PrimaryNav li a {display:inline-block;color:#FFFFFF;;text-align:center;padding:20px 20px;text-decoration:none;transition:0.3s;font-size:17px;}
ul.PrimaryNav li a:hover {background-color:#111;color:#FFFFFF;}
ul.PrimaryNav li.icon {display:none;}

@media screen and (max-width:680px) {
ul.PrimaryNav li:not(:first-child) {display:none;}
ul.PrimaryNav li.icon {float:right;display:inline-block;}

ul.PrimaryNav.responsive {position:relative;}
ul.PrimaryNav.responsive li.icon {position:absolute;right:0;top:0;}
ul.PrimaryNav.responsive li {float:none;display:inline;}
ul.PrimaryNav.responsive li a {display:block;text-align:left;}
}

@media screen and (min-width:680px) {
ul.PrimaryNav {width:100%; float:right;}
}

ul.secondaryNav {list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#CC0000;text-transform:uppercase;}
ul.secondaryNav li {float:left;}
ul.secondaryNav li a {display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none;}
ul.secondaryNav li a:hover:not(.active) {color:#FFFF00;}
ul.secondaryNav li a.active {background-color:#CC0000;}

@media screen and (min-width:320px) and (max-width:680px) {
ul.secondaryNav li {float:left;width:100%;border-radius:0px 0px 0px 0px;-webkit-border-radius:0px 0px 0px 0px;-moz-border-radius:0px 0px 0px 0px;border-bottom:1px solid #000;}
}

@media screen and (min-width:680px) {
ul.secondaryNav {border-radius:0px 0px 10px 0px;-webkit-border-radius:0px 0px 10px 0px;-moz-border-radius:0px 0px 10px 0px;width:680px;}
}

</style>
</head>
<body>

<ul class="PrimaryNav">
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
<li><a class="active" href="#home" role="navigation">Home ICON</a></li>
<li><a href="#news">Solutions</a></li>
<li><a href="#contact">Results</a></li>
<li><a href="#about">Clients</a></li>
<li><a href="#about">Create Wealth</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Charity</a></li>
</ul>

<ul class="secondaryNav">
<li><a href="#home">Design &amp; Build</a></li>
<li><a href="#news">Digital Marketing</a></li>
<li><a href="#contact">Measurement &amp; Improvement</a></li>
</ul>


<script>
function myFunction() {
document.getElementsByClassName("PrimaryNav")[0].classList.toggle("responsive");
}
</script>

</body>
</html>

Answer 1

这将是因为你正在将每个li漂浮到右边 - 你应该只将浮动应用于ul（强制它到屏幕右侧）而不是应用于ul中的每个li：

ul.PrimaryNav li {float:right;color:#FFFFFF;}

应该是

ul.PrimaryNav {float:right;....
ul.PrimaryNav li {color:#FFFFFF;}

这将导致整个ul显示在屏幕右侧，但其中的每个li将根据列出它们的顺序显示。您还需要检查其余代码是否存在冲突的float：right行为。

响应式导航菜单元素向后

1 个答案: