이전에도 많이 사용했던 코드 같은데 갑자기 생각이 안납니다.ㅠㅠ

float left 로 여러개의 메뉴를 만들고 지정된 폭이 넘치면 안보이게  overflow: hidden; 처리하는 예제입니다.

float가 overflow:hidden; 을 초기화하는 것은 알고 있는데 다른 방법도 있을것같습니다.

이런 경우에 어떻게 구현하십니까?

div 안쪽폭을 1000px 처럼 늘리면 편법으로는 되긴하지만 다른 방법이 있을것 같은데

토통 기억이 안납니다. 2시간동안 찾다가 포기했습니다.

도움 요청 드립니다.


<style>
.wrap {
    overflow:hidden;
    width:200px;
    border:2px solid red;
    white-space: nowrap;
    overflow: hidden;
}
ul{
    display:flex;
    list-style-type:none;
    margin:0; padding:0;
}
li{
    float:left;
    display: inline-block;
    padding:5px;
}

</style>
<div class='wrap'>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>



sir.kr에 올린 질문글을 herojd 님이 답변 주심

https://jsfiddle.net/cy6bjsfc/3/
display:flex;로 처리가능 하십니다.