•  16-09-2019
  •  | 
  •  

문제

내 웹사이트에는 사용자가 버튼을 클릭할 때 표시되는 로그인 양식이 있습니다.다른 콘텐츠 위에 떠다니는 div입니다.페이지의 작은 부분(로그인 링크 바로 아래)만 차지합니다.

하나의 작은 점을 제외하고는 모두 잘 작동합니다.로그인 링크 왼쪽에 정렬되어 표시됩니다(아래 다이어그램을 시도했습니다).

|로그인|

|여기에 로그인하세요|

저는 실제로 다음과 같이 보이길 원합니다(로그인 링크 오른쪽에 정렬).

| 로그인 |

|여기에 로그인하세요|

이것은 내 HTML입니다.

        <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
        </div>
        <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
        </div>

로그인 상자에 대한 CSS는 다음과 같습니다.

signinbox {배경색:#C1DEEE;패딩:10px;Z-색인:1;위치:순수한;상단:66px;}

CSS만으로 이것을 할 수 있습니까?

감사해요

도움이 되었습니까?

해결책

서명 정보를 다른 div 안에 감싸고 그것을 내부 신호라고 부른 다음 절대 배치 된 해외 div와 관련하여 위치하십시오. 또한 절대 위치에있는 해외선의 너비를 설정해야 할 수도 있습니다. 

div.inner-signinbox {
    position: relative;
    right: 20px;
}

signinbox {
    width: 250px; //ADD A WIDTH
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:1; 
    position: absolute;
    top:66px; 
}

그것이 작동하지 않는 경우, "왼쪽"속성을 서명 상자에 추가하여 수평 위치와 수직 위치를 설정하는 것이 어떻습니까? x와 y로 요소를 절대적으로 위치시킬 수없는 이유가 있습니까?

다른 팁

나는 당신이 시도하고 싶을 것 같아요

플로트 : 맞습니다

또는

텍스트 정렬 : 맞습니다

로그인 버튼이 포함 된 DIV 안에 로그인 물건을 넣으십시오.

컨테이너 위치 : 상대.

그런 다음 로그인 물건 위치를 제공하십시오 : 절대; 그리고 오른쪽 : 0;.

또한 여기에서 조심하십시오. JavaScript가 로그인하기 위해서만 요구하는 것은 꽤 무례합니다. 많은 사람들이 여러 가지 이유로 노 스크립트를 운영합니다.

"main-pane" 클래스로 새 div를 만들었습니다."signinbox"의 위치를 ​​조정할 수 있습니다."right"와 "top" 값을 변경하여 CSS에서.

<div class="main-pane">
  <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
                 <span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
           </a>
  </div>
  <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
   </div>
</div>

.main-pane{
    position:relative;
}

#signinbox{
    width: 250px; 
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:5; 
    position: absolute;
    top:66px;
    right:0px;  
}

감사합니다, Arun Krishnan

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top