탐색 표시 줄 및 검색 창 인라인

Question

페이지 중앙의 한 줄에 수평 탐색 막대와 검색 상자를 함께 만들려면 어떻게해야합니까? 저는 텍스트 정렬 센터를 사용하여 페이지 중앙에 탐색 막대를 놓습니다. 그러나 탐색 상자를 탐색 옆에두기 위해 float을 사용하면 전체 nav가 왼쪽으로 이동합니다.

body { 
 
    background-color: #C0C0C0; 
 
    margin: 0px; 
 
} 
 
.nav { 
 
    text-align: center; 
 
    list-style: none; 
 
} 
 
.nav li { 
 
    display: inline; 
 
    float: left; 
 
}

<div id="title"> 
 
    <p> 
 
    <h1>Welcome to KDU MUSIC CENTER</h1> 
 
    </p> 
 
</div> 
 

 
<div> 
 
    <ul class="nav"> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="findoutmore.php">Find out more</a></li> 
 
    <li><a href="offer.html">Offer</a></li> 
 
    <li><a href="credit.html">Credit</a></li> 
 
    <li><a href="#">Admin</a></li> 
 
    <li><a href="wireframe.html">WireFrame</a></li> 
 
    </ul> 
 

 
    <form class="formright"> 
 
    <input type="text" placeholder="Search"> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
    some text 
 
</div>

Answer 1

이, 당신을 위해 일 목록 항목 및 양식의 표시 속성에 대한 인라인 블록의 사용을주의해야한다. 또한 외부 div에 텍스트 정렬 센터를 배치했습니다. 이제 화면 가운데에 검색 기능이 포함 된 탐색 항목이 렌더링됩니다.

정렬되지 않은 목록 (ul)의 왼쪽에서 상속 된 패딩이 제거되어 약간 벗어난 모양이됩니다.

편집 : OP의 의견에 대답하십시오. 내가 바로 떠하기 위해 .formright을 변경 , 컨테이너 DIV #의 네비게이션 바 100 % 폭과 0

body { 
 
    background-color: #C0C0C0; 
 
    margin: 0px; 
 
} 
 
.nav { 
 
    list-style: none; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
} 
 

 
.nav { 
 
    display: inline-block; 
 
    padding-left: 0px; 
 
    margin: 0px; 
 
} 
 

 
.formright { 
 
    display:inline-block; 
 
    float:right; 
 
} 
 

 
#navbar { 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div id="title"> 
 
    <p> 
 
    <h1>Welcome to KDU MUSIC CENTER</h1> 
 
    </p> 
 
</div> 
 

 
<div id="navbar"> 
 
    <ul class="nav"> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="findoutmore.php">Find out more</a></li> 
 
    <li><a href="offer.html">Offer</a></li> 
 
    <li><a href="credit.html">Credit</a></li> 
 
    <li><a href="#">Admin</a></li> 
 
    <li><a href="wireframe.html">WireFrame</a></li> 
 
    </ul> 
 

 
    <form class="formright"> 
 
    <input type="text" placeholder="Search"> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
</div> 
 
<div> 
 
    some text 
 
</div>

Answer 2

정말보기 어떤 종류의 당신 '에 따라에 ul.nav 마진을 만든 다시 갈거야. 나는 그것이

body { 
 
    font-family: 'Helvetica Neue', Helvetica, sans-serif; 
 
    background-color: #CCC; 
 
    margin: 0px; 
 
} 
 
nav { 
 
    list-style: none; 
 
    background: tomato; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: flex; 
 
    align-items: center; 
 
    
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px 1em; 
 
    color: white; 
 
} 
 
nav a:hover { 
 
    background: rgba(0,0,0,0.1); 
 
} 
 
nav .spacer { 
 
    flex-grow: 1; 
 
} 
 
nav .formright { 
 
    padding: 10px; 
 
} 
 
@media (max-width: 800px) { 
 
    nav .formright { 
 
    display: none; 
 
    } 
 
}

<div id="title"> 
 
    <h1>Welcome to KDU MUSIC CENTER</h1> 
 
</div> 
 

 
<nav> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="findoutmore.php">Find out more</a></li> 
 
    <li><a href="offer.html">Offer</a></li> 
 
    <li><a href="credit.html">Credit</a></li> 
 
    <li><a href="#">Admin</a></li> 
 
    <li><a href="wireframe.html">WireFrame</a></li> 
 

 
    <div class="spacer"></div> 
 

 
    <form class="formright"> 
 
    <input type="text" placeholder="Search"> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
</nav> 
 

 
<p>Some text</p>

당신은 검색 창을 보려면 전체 화면을 열어야 할 수도 있습니다 사용하여 전통적인 찾고 네비게이션 바에을했습니다 flexbox로 보는 게 좋을 것.