导航栏无法正确浮动到右侧

Question

所以我想让我的网站从左侧的“ h1”开始，然后在右侧的同一位置放置一个菜单，但是4个“ li”项目总是彼此叠放，不会进入一行，总是两行。 不知道我在这里做错了什么，只是找不到解决方案。

感谢您的帮助。

-HTML-

  <h1>Headline</h1>
  <nav class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="work/index.html">Portfolio</a></li>
        <li><a href="travel/index.html">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

-CSS-

 h1{
     padding: 0 4%;
     padding-top: 1%;
     text-transform: uppercase;
     float: left;
 }

 nav{
     float: right;
     padding-right: 2%;
     padding-top: 3%;
     width: auto;
 }

 .menu ul{
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .menu li{ 
      margin: 0 5%;
      float: left;
  }

 .menu li a {
     text-decoration: none;
     color: #666666;
     font-size: 25px;
     font-weight: bold;
     display: block;
     float: left;
 }

Answer 1

您可以通过为您的ul标签设置display：flex并删除child的所有float属性来实现此目的（无效）

 h1{ padding: 0 4%; padding-top: 1%; text-transform: uppercase; float: left; } nav{ float: right; padding-right: 2%; padding-top: 3%; width: auto; } .menu ul{ display:flex; list-style: none; padding: 0; margin: 0; } .menu li{ margin: 0 5%; } .menu li a { text-decoration: none; color: #666666; font-size: 25px; font-weight: bold; display: block; } 

 <h1>Headline</h1> <nav class="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="work/index.html">Portfolio</a></li> <li><a href="travel/index.html">Blog</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> 

Answer 2

如果您愿意使用Javascript，这应该适合您：

（在此处完成JSFiddle演示）

/*get the width of h1*/
var title = document.getElementById('title');
var titleS = title.currentStyle || window.getComputedStyle(title);
var titleW = title.offsetWidth + parseFloat(titleS.paddingLeft) + parseFloat(titleS.paddingRight);

var nav = document.getElementById('menu');
var navS = nav.currentStyle || window.getComputedStyle(nav);
var navP =  parseFloat(navS.paddingLeft) + parseFloat(navS.paddingRight);

/*set nav width by deducting title width from window width*/
nav.style.width = ((window.innerWidth - titleW) + navP)+'px';

console.log('(('+window.innerWidth+' - '+titleW+') + '+navP+'px)');