(위치 : 절대)가있는 요소의 너비 (위치 : 상대)가있는 요소 내부

사용자 3405682

jsFiddle에서 볼 수있는 문제가 있습니다.

하위 메뉴의 너비를 수정하는 방법은 무엇입니까? 하위 메뉴 요소의 너비는 동적이어야합니다.

CSS의 일부

.contextMenu, .contextMenu ul {
    margin: 0;
    padding: 2px 0;
    list-style-type: none;
    background: white;
    border: 1px solid #bababa;
    font-size: 13px;
    position: absolute;
}
.contextMenu li {
    /**...**/
    position: relative;
}
/**...**/
.contextMenu li ul {
    left: 100%;
    z-index: 1000;
    top: -3px;
    display: none;
}
.contextMenu li:hover ul {
    display: inline-block;
}
/**...**/

HTML

    <ul class="contextMenu">
    <li class="click_me">Some elemetn</li>
    <li class="stripe"></li>
    <li>
        Some 2
        <span>»</span>
        <ul><li class="click_me">Some 2.1</li></ul>
    </li>
    <li>
        Some 3
        <span>»</span>
        <ul>
            <li>
                some 3.1
                <span>»</span>
                <ul><li class="click_me">Some element 3.1.1</li></ul>
            </li>
        </ul>
    </li>
</ul>

jsFiddle 예제

추신 : 문법 오류로 인해 죄송합니다.

아르 준

white-space : nowrap이를 위해 사용할 수 있습니다 .

.contextMenu li {
    white-space:nowrap;
}

바이올린을 확인하십시오 :
http://jsfiddle.net/7qV2H/2/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

절대 위치 요소의 너비

분류에서Dev

위치 절대 요소의 100 % 너비

분류에서Dev

절대 위치 요소 내부의 고정 위치 요소

분류에서Dev

절대 위치 내부의 위치 요소

분류에서Dev

외부 요소에 대한 내부 요소의 고정 위치

분류에서Dev

외부 요소에 대한 내부 요소의 고정 위치

분류에서Dev

절대 위치가있는 요소의 공간을 차지하는 요소

분류에서Dev

상대 상위 (Chrome 32.0.1700.77) 내부에 절대 위치 입력 요소가있는 Chrome CSS 문제 오른쪽 : 0이 작동하지 않음

분류에서Dev

ng-repeat 목록 내부의 요소를 겹치는 방법-위치 : 절대?

분류에서Dev

ng-repeat 목록 내부의 요소를 겹치는 방법-위치 : 절대?

분류에서Dev

절대 위치가 있기 때문에 대부분의 요소 주위에 div가 필요합니까?

분류에서Dev

절대 위치 요소가있는 열 사이의 예기치 않은 간격

분류에서Dev

상대 위치 내부 절대 위치는 부모에 요소 범위를 제공합니다.

분류에서Dev

절대 위치 요소가 Safari iOS의 다른 절대 위치 요소 위에 있지 않습니다.

분류에서Dev

CSS에서 "절대"위치와 정의되지 않은 너비가있는 요소를 중앙에 배치 하시겠습니까?

분류에서Dev

위치 : 절대 콘텐츠가있는 div의 너비

분류에서Dev

위치 절대 요소는 위치 상대 요소 대신 페이지의 하위 요소입니다.

분류에서Dev

하위 요소가있는 div 요소 내부의 CSS Hover

분류에서Dev

위치를 막을 수있는 것 : 상대; 왼쪽 : 0; 오른쪽 : 200px; 요소의 너비에 영향을 미치는가?

분류에서Dev

부모 요소가 절대 위치에있는 자식 요소에서 높이를 상속 할 수 있습니까?

분류에서Dev

상대 부모의 오른쪽 테두리를 넘어 확장 할 때 절대 위치 요소의 너비가 잘립니다.

분류에서Dev

상대적 위치가있는 상위 최대 너비 재정의

분류에서Dev

화면 너비를 가져 오기 위해 절대 위치로 요소를 만드는 방법이 있습니까?

분류에서Dev

반응 형 이미지가있는 인라인 블록 요소를 내부에 표시하면 Firefox의 절대 / 고정 컨테이너 내부에 배치되면 잘못된 너비가 나타납니다.

분류에서Dev

조상이 절대 위치를 가지고 있음에도 불구하고 페이지에서 요소의 위치를 절대적으로 만드는 방법

분류에서Dev

JQuery-컨테이너 내 요소 절대 위치 및 회전 무작위 화

분류에서Dev

백분율 너비가있는 컨테이너의 라디오 버튼 의사 요소 위치 지정 문제

분류에서Dev

요소 내부의 다른 요소 위에 요소 추가

분류에서Dev

상대 요소 위에 배치되지 않는 절대 요소

Related 관련 기사

  1. 1

    절대 위치 요소의 너비

  2. 2

    위치 절대 요소의 100 % 너비

  3. 3

    절대 위치 요소 내부의 고정 위치 요소

  4. 4

    절대 위치 내부의 위치 요소

  5. 5

    외부 요소에 대한 내부 요소의 고정 위치

  6. 6

    외부 요소에 대한 내부 요소의 고정 위치

  7. 7

    절대 위치가있는 요소의 공간을 차지하는 요소

  8. 8

    상대 상위 (Chrome 32.0.1700.77) 내부에 절대 위치 입력 요소가있는 Chrome CSS 문제 오른쪽 : 0이 작동하지 않음

  9. 9

    ng-repeat 목록 내부의 요소를 겹치는 방법-위치 : 절대?

  10. 10

    ng-repeat 목록 내부의 요소를 겹치는 방법-위치 : 절대?

  11. 11

    절대 위치가 있기 때문에 대부분의 요소 주위에 div가 필요합니까?

  12. 12

    절대 위치 요소가있는 열 사이의 예기치 않은 간격

  13. 13

    상대 위치 내부 절대 위치는 부모에 요소 범위를 제공합니다.

  14. 14

    절대 위치 요소가 Safari iOS의 다른 절대 위치 요소 위에 있지 않습니다.

  15. 15

    CSS에서 "절대"위치와 정의되지 않은 너비가있는 요소를 중앙에 배치 하시겠습니까?

  16. 16

    위치 : 절대 콘텐츠가있는 div의 너비

  17. 17

    위치 절대 요소는 위치 상대 요소 대신 페이지의 하위 요소입니다.

  18. 18

    하위 요소가있는 div 요소 내부의 CSS Hover

  19. 19

    위치를 막을 수있는 것 : 상대; 왼쪽 : 0; 오른쪽 : 200px; 요소의 너비에 영향을 미치는가?

  20. 20

    부모 요소가 절대 위치에있는 자식 요소에서 높이를 상속 할 수 있습니까?

  21. 21

    상대 부모의 오른쪽 테두리를 넘어 확장 할 때 절대 위치 요소의 너비가 잘립니다.

  22. 22

    상대적 위치가있는 상위 최대 너비 재정의

  23. 23

    화면 너비를 가져 오기 위해 절대 위치로 요소를 만드는 방법이 있습니까?

  24. 24

    반응 형 이미지가있는 인라인 블록 요소를 내부에 표시하면 Firefox의 절대 / 고정 컨테이너 내부에 배치되면 잘못된 너비가 나타납니다.

  25. 25

    조상이 절대 위치를 가지고 있음에도 불구하고 페이지에서 요소의 위치를 절대적으로 만드는 방법

  26. 26

    JQuery-컨테이너 내 요소 절대 위치 및 회전 무작위 화

  27. 27

    백분율 너비가있는 컨테이너의 라디오 버튼 의사 요소 위치 지정 문제

  28. 28

    요소 내부의 다른 요소 위에 요소 추가

  29. 29

    상대 요소 위에 배치되지 않는 절대 요소

뜨겁다태그

보관