탭메뉴 정렬 문의

안녕하세요.

항상 친절히 답해주셔서 감사드립니다.

다름아니라 탭메뉴 2개를 만들었는데 지금 위아래로 정렬이 되어있어서 첨부그림처럼 한줄로 정렬되게 하려고

https://imgur.com/a/XqJ77Gl

float: none; 이나 float: left; 구문을 썼는데 적용이 안되서요.

도움부탁드립니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    float 속성은 어느 부분에 추가하신 건지요?

    추가하신 탭을 감싸고 있는 영역의 max-width 값도 수정해주셔야 할 듯합니다.

    워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 활용해보시겠어요?

    #post-53 .cafe-main { max-width: 100%; }
    #post-53 .cafe-main .su-tabs { float: left; width: 48%; margin-right: 1%; }

    고맙습니다.

  • 감사합니다~ 잘 적용했습니다.

    그런데 https://imgur.com/a/1NEP8W4 보시면 삐져나온 부분이 있어서

    #post53 .hentry .entry-content a: visited { background: transparent; } 적용해봤는데 적용이 안되서요..

    한번 봐주시겠어요? ^^;;

  • 해당 페이지에서 "카페 신청하기" 버튼 위에 마우스를 올렸을 때

    하얀색 배경 표시되는 건 테마 쪽에서 설정하고 있는 듯합니다.

    아래의 CSS 코드도 추가해보시겠어요?

    .entry #post-53 p a:hover { background: none; }

    고맙습니다.

  • 알려주신대로 했는데 적용이 안되고 있습니다.

    https://xion.kr/?page_id=53 해당 페이지 편집할때 '카페 신청하기'버튼에 마우스오버시

    <a title="xion은 크리에이터의 카페공간을 제공합니다." href="http://xion.kr/?page_id=180"> 

    를 적용했는데 이 적용부위가 양옆으로 삐져나오는것 같은데 어떻게 처리하면 좋을까요?

  • 코드상에는 문제가 없으나

    올려주신 페이지에서 직접 확인해보니

    추가하신 코드를 정상적으로 인식하지 못하는 듯합니다.

    복사 -> 붙여넣기로 추가하신 건지요?

    이전 댓글에 안내해드린 코드를 직접 입력해서 확인해보시겠어요?

    어떻게 추가하셨는지도 알려주시겠어요?

    고맙습니다.

  • 지우고 다시 입력했더니 잘 적용되었습니다. 감사합니다!!

  • 항상 감사드립니다! 3월 25일 알려주신 구문대로 하니까 모바일에서는 탭메뉴가 위아래로 왼쪽 정렬이 되어버려서 

    .cafe-main { max-width: 670px; margin: 0 auto; }
    @media screen and (max-width: 600px) {#post-53 .cafe-main { ??????;}}

    위 구문을 쓰고 ?? 부분에 여러가지 적용해보고 있는데 모바일에서 이 두개의 메뉴가 위아래로 왼쪽 정렬인 것을 가운데 정렬로 수정해주려면 어떻게 해야할까요?

  • 안녕하세요.

    모바일에서 해당 영역을 가운데 정렬하시려면

    사용자 정의하기 쪽 CSS 입력 필드에

    아래의 코드도 추가해서 확인해보시겠어요?

    @media screen and (max-width: 600px) {
    	#post-53 .cafe-main { width: 100%; }
    	#post-53 .cafe-main .su-tabs { float: none; margin: 0 auto; }
    }

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기