채택완료

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

1888917661_1689483069.2615.png

 

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

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

|

답변 2개 / 댓글 4개

채택된 답변
+20 포인트

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

Copy
<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>

답변에 대한 댓글 2개

감사합니다 head.php에 넣나요 아니면 css에 넣어야 하나요?
style 부분은 css 에 넣으시면 되구요. html 부분은 원하시는 곳에 넣으시면 됩니다.

float:left;

float:right;

 

답변에 대한 댓글 2개

어느 부분에 넣으면 될까요?
[code]
<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>
[/code]
이 부분을 검토해 보세요.

답변을 작성하려면 로그인이 필요합니다.