해당 사이트처럼 메뉴를 좌우로 나누려면

해당 사이트처럼 메뉴를 좌우로 나누려면

QA

해당 사이트처럼 메뉴를 좌우로 나누려면

본문

1888917661_1689483069.2615.png

 

이렇게 메뉴를 좌우로 나누려면 어떻게 해야 되나요?

메뉴 앞에 이미지 넣는 법도 아시는분 도움 부탁드립니다!

이 질문에 댓글 쓰기 :

답변 2

대략 아래처럼 하시면 될 것 같습니다


<style>
    .menu-container {
        display: flex;
        justify-content: space-between;
    }
    .left-menu {
        display: flex;
        align-items: center;
    }
    .left-menu img {
        margin-right: 5px; /* 이미지와 텍스트 사이의 간격 조절 */
    }
    .right-menu {
        display: flex;
        align-items: center;
    }
    .right-menu img {
        margin-right: 5px; /* 이미지와 텍스트 사이의 간격 조절 */
    }
</style>
<div class="menu-container">
    <div class="left-menu">
        <img src="이미지 URL" alt="이미지 설명">
        <ul>
            <li>1번 메뉴 항목</li>
        </ul>
    </div>
    <div class="left-menu">
        <img src="이미지 URL" alt="이미지 설명">
        <ul>
            <li>2번 메뉴 항목</li>
        </ul>
    </div>
    <div class="right-menu">
        <img src="이미지 URL" alt="이미지 설명">
        <ul>
            <li>3번 메뉴 항목</li>
        </ul>
    </div>
    <div class="right-menu">
        <img src="이미지 URL" alt="이미지 설명">
        <ul>
            <li>4번 메뉴 항목</li>
        </ul>
    </div>
</div>

float:left;

float:right;

 


    <div id="tnb">
    	<div class="inner">
            <?php if(G5_COMMUNITY_USE) { ?>
    		<ul id="hd_define">
    			<li class="active"><a href="<?php echo G5_URL ?>/">커뮤니티</a></li>
                <?php if (defined('G5_USE_SHOP') && G5_USE_SHOP) { ?>
    			<li><a href="<?php echo G5_SHOP_URL ?>/">쇼핑몰</a></li>
                <?php } ?>
    		</ul>
            <?php } ?>
			<ul id="hd_qnb">
	            <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>
	            <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">Q&A</a></li>
	            <li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>
	            <li><a href="<?php echo G5_BBS_URL ?>/current_connect.php" class="visit">접속자<strong class="visit-num"><?php echo connect('theme/basic'); // 현재 접속자수, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정  ?></strong></a></li>
	        </ul>
		</div>
    </div>

이 부분을 검토해 보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 471
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT