목록으로

간단한 javascript 질문드립니다. 채택완료

로빈아빠 7년 전 조회 1,937

답변 3

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

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

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

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

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

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

도움 요청 드립니다..

소스코드

</p>

<p><style>

.wrap {

    overflow:hidden;

    width:200px;

    border:2px solid red;

    white-space: nowrap;

    overflow: hidden;

}

ul{

    list-style-type:none;

    margin:0; padding:0;

    /* width:1000px; <-- 이거 사용하지 않고 처리 */

}</p>

<p>.two {

    width:1000px /* 이거 사용하지 않고 처리 */

}</p>

<p>li{

    float:left;

    display: inline-block;

    padding:5px;

}</p>

<p></style></p>

<p> </p>

<p>안되는 부분,..,</p>

<p><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></p>

<p> </p>

<p>
</p>

<p> </p>

<p>편법으로 되는 부분 ul 의 폭을 1000으로 늘림..</p>

<p><div class='wrap'>

    <ul class='two'>

        <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></p>

<p>