导航栏不会正确地向右浮动

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，这应该适合您：

(Complete JSFiddle demo here)

/*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)');

导航栏不会正确地向右浮动

Nav bar won't float to the right correctly

html

css

menu

nav