float가있는 메뉴 가져 오기

Question

다음과 같은 메뉴가 필요합니다. menssana.be/FOOD/

하지만이 것은 float로 만들어지지 않았습니다. 화면 크기를 조정하면 읽을 수 없습니다.
그래서 저는 그것을 float으로 만들고 싶습니다. 그러나 나는 올바르게 할 수 없습니다.
항상 잘못된 것이 있습니다.
는 누군가가 나에게

내 코드는 몇 가지 힌트를 줄 수 : 도움을

#active { 
    /* color:#FFFFFF; 
     background-color: #1A1718; */ 
} 
#menu { 
    margin-top: -1%; 
    width: 100%; 
    background-color: #D3D5D7; 
    color: #000000; 
    text-align: center; 
} 
menu ul { 
} 
#menu a { 
    color:#000000; 
    display: block; 
    min-height: 25px; 
    width: 100%; 
    text-decoration: none; 
    line-height: 25px; 
} 
#menu a:hover { 
    color:#FFFFFF; 
    background-color: #1A1718; 
} 
#menu li { 
    list-style: none; 
    display: inline-block; 
} 
.link { 
    width: 11%; 
} 

    <div id ="menu"> 
    <ul> 
     <li class ="link"><a class ="active" href ="index.php">Home</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="samenstellingen.php">Samenstellingen</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="panini.php">Panini's</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="soep.php">Soep</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="beleg.php">Beleg</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="contact.php">Contact</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="../WELNESS/index.php">Schoonheidssalon</a></li> 
    </ul> 
</div> 

감사합니다.

Answer 1

요소를 겹치기 때문에 메뉴를 읽을 수 없다고 생각한다면 화면 크기가 너무 작 으면 새 줄을 끊어야합니다. 이에보십시오 : 당신은 모든 메뉴 항목이 동일한 폭을 갖고 싶어

.link{ 
    /*width: 11%; Remove this*/ 
    min-width:11%; /*Include this*/ 
} 

Answer 2

, 당신은 디스플레이와 함께 가야한다 : 테이블이 JsFiddle에서 볼 수있다. it’s better to style with classes 때문에 일부 ID/클래스의 이름이 바뀌었고 코드가 정리되었습니다.

<ul class="nav"> 
    <li><a class="active" href="index.php">Home</a></li> 
    <li><a href="samenstellingen.php">Samenstellingen</a></li> 
    <li><a href="panini.php">Panini's</a></li> 
    <li><a href="soep.php">Soep</a></li> 
    <li><a href="beleg.php">Beleg</a></li> 
    <li><a href="contact.php">Contact</a></li> 
    <li><a href="../WELNESS/index.php">Schoonheidssalon</a></li> 
</ul> 

CSS

.nav { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #D3D5D7; 
    color: #000000; 
} 
.nav li { 
    display: table-cell; 
    text-align: center; 
} 
.nav li + li { 
    border-left: 1px solid #000; 
} 
.nav a { 
    color:#000000; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    line-height: 25px; 
    overflow: hidden; 
} 
.nav a:hover { 
    color:#FFFFFF; 
    background-color: #1A1718; 
} 

는하지만 때문에 메뉴에있는 항목의 수와 단어의 길이에 여전히 작은 화면에 완벽한 아니다. 따라서 작은 화면에서 media-queries으로 메뉴 스타일을 변경하고 을 제거하면 가독성이 높아지지만 항목의 너비는 동일 해 지거나 메뉴를 재구성 할 수 있습니다.