ナビゲーションバーが正しく右に浮かぶことはありません

Question

私はウェブサイトを左に 'h1'で始まり、次に同じ高さの位置に右手にメニューを配置しますが、4 'li'itemsは常にお互いの上に積み重ねられ、ちょうど1つのラインに入ることはありません、彼らは常に2つです。私がここで何をやったのか分からず、解決策を見つけることができません。

ありがとうございました。

-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タグのために曲がり、子供のすべてのフロートのプロパティを削除する（それは勝ちましたトンの作品）

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