Question

我正在尝试使用移动菜单创建一个简单的响应式导航栏，我不能为我的生活弄清楚这一点。这应该很简单，但我真的没有用这些东西练习，所以这不适合我。我正在尝试创建一个响应式导航菜单，其菜单图标与导航栏右侧对齐。我会在这里发布codepen上的所有内容 http://codepen.io/rustinpeace91/pen/JRaRyO?editors=1100

显而易见的答案似乎是

.menu-icon-1{
  display:block;
  float:right;
 }

这不起作用。我认为这也不是一个特殊问题。当我点击inspect元素时，它会应用于图标，但不会将其浮动到右侧。

Answer 1

您正在浮动列表项的内容。您需要浮动li标记本身。只需将menu-icon-1类添加到li，而不是a标记。

之后，导航栏似乎在移动视图中消失。这是因为您将只有一个可见元素，并且此元素将浮动，这将使ul容器具有height = 0.为避免这种情况，您需要添加clearfix。

以下是固定版本http://codepen.io/lazamar/pen/XjPjya

Answer 2

您需要从ul-＆gt; li中删除菜单图标并自行拥有它。

＆＃13;

.menu-icon-1{
  float: right;
}

＆＃13;

<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>

＆＃13;

Answer 3

在元素上应用float:right会将元素从正常位置取出（将其视为位置：绝对有一些差异）。

如果我们将float:right应用于ul个标记main-nav。导航容器将崩溃。

下面的按扣显示由于导航将其高度调整为0而隐藏的浮动容器。

对于快速解决方案，我认为调整导航的高度以显示ul标记将起作用

.header {
    background-color: #900000;
    height:50px
}

这里的片段

下面的代码段

＆＃13;

/*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 {
 	font-family:"Helvetica Neue",Helvetica, Arial;
	background: #f9f9f9;
	color: #555;
 }

 a{
 	text-decoration:none;
 	font-weight:bold;
 	color:white;
 }

/*HEADER*/

.header {
  	background-color:#900000;
   height:50px;
}



ul.main-nav li {
  display:inline-block;
  line-height:48px;
  margin-left:20px;
}

nav ul a:hover{
		background:#E6E6E6;
		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 {
  	line-height:18px;
  }
  
}
.main-nav{
float:right;
}

＆＃13;

<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">&#9776; 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>

＆＃13;

无法将此菜单图标浮动到导航栏的右侧

3 个答案: