창 너비에 따라 창 너비가 바뀌면 ul 크기가 바뀌는 방법

내 제목을 쓰면 이제 ul li이 만든 메뉴가 생겼습니다. 창이 너무 좁아서 메뉴가 깨지지 않게 할 것입니다. 하지만 일단 "nowrap"속성이 붙으면 창으로 다시 크기를 조정하지 않습니다. 어떻게 만듭니 까?창 너비에 따라 창 너비가 바뀌면 ul 크기가 바뀌는 방법

<ul class="parallMenu"> 
<li>item1</li> 
<li>item2</li> 
</ul> 



.parallMenu{ 
    list-style:none; 
    margin-left:0; 
    padding-left:0; 
    text-decoration:none; 
    white-space:npwrap; 
    width:100%; 
} 

.parallMenu li{ 
    width:120px; 
    min-width:30px; 
    display:inline-block; 

}

감사! 그래서

출처

2014-04-28 Kun-yao Wang

$(".parallMenu").toggleClass("nowrap"); 

.nowrap 
{ 
    width: 500px !important; /*(fixed value)*/; 
}

같은 다른 속성

또는

<ul id="MyMenu" class="parallMenu wrap"></ul> 
$("#MyMenu").toggleClass("wrap"); 
$("#MyMenu").toggleClass("nowrap"); 

.wrap 
{ 
    white-space :wrap; 
} 
.nowrap 
{ 
white-space: nowrap; 
}

및 다른 클래스 U에 대한 differet 물건을 정의를 위해 간다.

편집 됨 : 더 스크립트가없는 경우

CSS 미디어 화면을 사용하십시오.

@media (min-width: 768px) { 
    .parallMenu 
    { 
     white-space:nowrap; 
    } 
}

출처

2014-04-28 08:45:32 WickStargazer

답장을 보내 주셔서 감사합니다! 하지만 그것은 단지 CSS, jQuery가 없을 것입니다 ... –

오, 오해에 대단히 죄송합니다. 작은 화면에서 원하는 것을 지정하려면 @media (최소 너비 : 768px) {}를 사용하십시오. – WickStargazer

필자가 이해하는 바와 같이, 768px보다 작은 창 너비라면 "white-space : nowrap"을 더하기 위해서입니까? 하지만 768px보다 작 으면 너비가 유연 해지기를 원하나요? –

창 너비에 따라 창 너비가 바뀌면 ul 크기가 바뀌는 방법

답변

관련 문제