내비게이션 막대가 오른쪽으로 정확히 플로트되지 않습니다

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 태그을위한 플렉스와 아이의 모든 플로트 속성을 제거 (그것은 '수상 t 작품)

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

이 당신을 위해 작동합니다 : 그것은 유용 경우

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