홈>

position - html 포지셔닝 - 제대로 얻을 수 없다

바이올린을 만들었습니다 :

https://jsfiddle.net/14f5jro7/

질문: "Familien"의 하위 메뉴 (보러 가기)가 아래에 나타나지 않지만 오른쪽으로 이동 한 이유는 무엇입니까?

Blabla : 몇 시간 동안 적절한 메뉴를 만들기 위해 노력하고 있습니다. 튜토리얼에 따르면 부모가 읽은 자습서에 따르면 위치 = 상대 및 자식 위치 = 절대이어야합니다. 그런 다음 상단과 왼쪽을 사용할 수 있습니다. 이것이 제가 시도한 것이며 실패한 이유를 모르겠습니다.

HTML :

<body>
<div id="header">
</div>
<div id="menu">
    <ul>
        <li>
            <a href="#">Familien</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">Familie editieren</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Patienten</a></li>
        <li><a href="#">Materialien</a></li>
        <li><a href="#">Proben</a></li>
    </ul>    
</div>
<div id="main">
<h1>
Welcome to biobank v1.0
</h1>
</div>
<div id="footer">footer</div>
</body>

CSS :

#menu ul {
list-style-type: none
}

#menu li {
    display: inline-block;
    padding:10px 10px;
    margin: 5px;
    border-radius: 10px;
    border-top:3px solid #777777;
    border-right:3px solid #333333;
    border-bottom:3px solid #444444;
    border-left:3px solid #777777;
    background: #eee;
    position: relative;
}


.sub-menu {
left:0%;
top: 100%;
z-index: -1;
position:absolute;
}
#menu > ul > li:hover .sub-menu {
z-index: 1;
}
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}

#menu {
float: left;
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;
}

#footer {
float: left;
width: 100%;
background-color: white;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}

수정:이 답변과 추가 연구에서 영감을 얻은 자체 솔루션을 찾았습니다. 여기에 도움이 되길 바랍니다.

/* body */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}

/* header */
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}

/* menu */
#menu {
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

#menu * {
display: inline-block
}

#menu ul {
list-style-type: none;
}

#menu li {
    padding:10px 10px;
    border-radius: 10px;
    border-top:3px solid #777777;
    border-right:3px solid #333333;
    border-bottom:3px solid #444444;
    border-left:3px solid #777777;
    background: #eee;
}
#menu > ul > li {
position: relative;
}

.sub-menu {
padding:0;
left:0%; /* ignores border of parent, manual adjustment after placement needed!!*/
margin-left: -3px; /* gotta be behind left:0 !!!!*/
top: 100%;
margin-top: 3px;
z-index: -1;
position:absolute;
}
#menu > ul > li:hover .sub-menu {
z-index: 1;
}


/* main */
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;
}

/* footer */
#footer {
float: left;
width: 100%;
background-color: white;
}

htmlpositionabsoluterelative
  • 답변 # 1

    ul 내부 하위 메뉴에는 왼쪽 여백이 있습니다.

    이것은 왼쪽으로 바뀔 것입니다 :

    .sub-menu ul {
  padding: 0;
  margin:0;
}
#menu .sub-menu ul li {
  margin: 0;
}

    가장자리를 기준으로 왼쪽 값을 -3px로 변경

    여기서 코드를 업데이트했습니다. 감사합니다

    #menu ul {
list-style-type: none
}

#menu li {
    display: inline-block;
    padding:10px 10px;
    margin: 5px;
    border-radius: 10px;
    border-top:3px solid #777777;
    border-right:3px solid #333333;
    border-bottom:3px solid #444444;
    border-left:3px solid #777777;
    background: #eee;
    position: relative;
}


.sub-menu {
padding-top: 5px;
left:-3px;
top: 100%;
z-index: -1;
position:absolute;
}
.sub-menu ul {
  padding: 0;
  margin: 0;
}
#menu .sub-menu ul li {
  margin: 0;
}
#menu > ul > li:hover .sub-menu {
z-index: 1;
}
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}

#menu {
float: left;
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;
}

#footer {
float: left;
width: 100%;
background-color: white;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}



    <body>
<div id="header">
</div>
<div id="menu">
    <ul>
        <li>
            <a href="#">Familien</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">Familie editieren</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Patienten</a></li>
        <li><a href="#">Materialien</a></li>
        <li><a href="#">Proben</a></li>
    </ul>    
</div>
<div id="main">
<h1>
Welcome to biobank v1.0
</h1>
</div>
<div id="footer">footer</div>
</body>

  • 답변 # 2

    하위 메뉴에 여백을 추가하십시오 :)

    .sub-menu {
    margin-left:-55px;
    top: 100%;
    z-index: -1;
    position:absolute;
    }

  • 답변 # 3

    일부 브라우저의 ul 태그에서 기본적으로 왼쪽 여백과 관련된 일반적인 문제입니다. 그렇기 때문에 많은 저자들이 기본 CSS 규칙을 재설정하도록 적극 권장합니다. CSS 모범 사례

    여기에 대한 수정 사항 : 작업 예

    .sub-menu > ul {
  padding-left: 0;
}

    이것이 도움이되기를 바랍니다!

관련 자료

  • 이전 android - 클릭시 플러터에서 카드 팝업을 만드는 방법은 무엇입니까?
  • 다음 Ionic2 - 이온 2 - 사용자가 입력 한 'url'을 읽는 방법?
    • 관련 질문