我正在嘗試使用移動菜單製作簡單的響應式導航欄，但我無法爲我的生活弄清楚這一點。這應該很簡單，但是我真的不習慣這種東西，所以它不適合我。我正在嘗試製作一個響應式導航菜單，其菜單圖標與導航欄右側對齊。我只是張貼在一切都在這裏codepen http://codepen.io/rustinpeace91/pen/JRaRyO?editors=1100遇到麻煩將此菜單圖標浮動到我的導航欄右側
顯而易見的答案似乎是
.menu-icon-1{
display:block;
float:right;
}
這不起作用。我不認爲這是一個特殊問題。當我點擊檢查元素時，它適用於圖標，但不會將它浮動到右側。
您需要刪除的菜單圖標出了UL->裏的，並有其自身。
.menu-icon-1{
float: right;
}<nav class="header">
<ul class="main-nav">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
<li></li>
</ul>
<a href="#" class="menu-icon-1">☰ menu</a>
</nav>您正在浮動列表項的內容。你需要漂浮li標籤本身。只需將menu-icon-1類添加到li而不是a標記。
之後，導航欄似乎在移動視圖上消失。這是因爲您只有一個可見元素，並且此元素將會浮動，這將使ul容器的height = 0。爲了避免這種情況，您需要添加一個clearfix。
上的元件施加float:right將採取元件出從正常位置（認爲它像的位置是：絕對有一些不同）。
如果我們將float:right應用於ul標籤，其類別爲main-nav。導航容器將崩潰。
下捕捉顯示由於隱藏的導航可調整高度的浮動容器爲0
對於一個快速的解決方案，我相信調整資產淨值的高度表明ul標籤會工作
.header {
background-color: #900000;
height:50px
}
片段這裏
片段下方
/*CSS RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol,
ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {margin:0; padding:0;
border:0; outline:0; font-size:100%; vertical-align:baseline;
background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote,
q{quotes:none;} blockquote:before, blockquote:after, q:before,
q:after{content:'';content:none;} :focus{outline:0;}
ins{text-decoration:none;} del{text-decoration:line-through;}
table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
body {
\t font-family:"Helvetica Neue",Helvetica, Arial;
\t background: #f9f9f9;
\t color: #555;
}
a{
\t text-decoration:none;
\t font-weight:bold;
\t color:white;
}
/*HEADER*/
.header {
\t background-color:#900000;
height:50px;
}
ul.main-nav li {
display:inline-block;
line-height:48px;
margin-left:20px;
}
nav ul a:hover{
\t \t background:#E6E6E6;
\t \t color:black;
padding:14px 0px 15px 0px;
}
.menu-icon-1{
display:none;
}
@media screen and (max-width:600px) {
ul.main-nav li:not(:last-child){
display:none;
}
.menu-icon-1{
display:block;
line-height:46px;
float:right;
}
a.menu-icon-1:hover {
\t line-height:18px;
}
}
.main-nav{
float:right;
}<html>
<head>
<title>Bob the fixing guy</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/b0aacd6f67.js"></script>
</head>
<body>
<nav class="header">
<ul class="main-nav">
<li><a href="#" class="current">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Videos</a>
</li>
<li><a href="#">Pricing</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#" class="menu-icon-1">☰ menu</a>
</li>
</ul>
</nav>
<img src="images/bobtitle.jpg" class="header-image" width="100%">
<div class="content">
<p>The C&O fully absorbed the Pere Marquette Railway in 1947, inheriting the car ferry service already established in Ludington. The division became known as the "Pere Marquette District" of the C&O railroad. There were already several car ferries working
out of Ludington at the time, including the Pere Marquette 21 and Pere Marquette 22, the City of Saginaw 31 and City of Flint 32, and the City of Midland 41. C&O decided to improve its ferry fleet by adding two new ships. While similar in design
to the immensely popular City of Midland 41, the new ships would have several notable design changes, such as a full-width pilot house that gave the crew an almost 360-degree view, and new lifeboat davits that freed up deck space.</p>
<p>Hull 369, which would become the Spartan began construction in late 1950 by the Christy Corporation of Sturgeon Bay, Wisconsin. She was launched on 4 January 1952 without fanfare; the Badger was being built at the same time, and the owners preferred
a double-christening ceremony. During construction, many cities on both sides of Lake Michigan lobbied for their names to go on the new ships, as was the tradition with previous Pere Marquette car ferries (i.e. City of Midland 41). C&O decided that
fewer feelings would be hurt if the twin ferries were named Spartan and Badger, after the mascots of Michigan State University (then Michigan State College) and the University of Wisconsin. The ships were christened on 6 September 1952 after the
Badger was successfully launched. The Spartan completed her sea trials on 27 September 1952 and was delivered to C&O on 23 October. She immediately began work for the C&O, operating from her home port of Ludington.</p>
</div>
</body>