HTML의 상위 컨테이너에서 두 개의 UL 목록을 두 개의 다른 항목으로 표시하는 방법은 무엇입니까?

질문

FlexBox의 부모 / 자식 (항목) 사이에 개념적으로 뭔가 빠진 것 같습니다.

다음과 같은 NavBar를 만들려고합니다.

원하는 출력 :

Logo      Home Store(class "leftbar")      About Search Contact Button(class "rightbar")

 <header>
    <img src="/bootstrap-clone/Images/bootstrap-logo-3C30FB2A16-seeklogo.com.png" alt="bootstraplogo" class="boostraplogo">
    <nav>
      <ul class="leftbar">
        <li><a href="#"></a>Home</li>
        <li><a href="#"></a>Documentation</li>
        <li><a href="#"></a>Examples</li>
        <li><a href="#"></a>Icons</li>
        <li><a href="#"></a>Themes</li>
        <li><a href="#"></a>Expo</li>
        <li><a href="#"></a>Blog</li>
      </ul>

      <ul class="rightbar">
        <li>v4.5</li>
        <li><a href="#"><img src="/bootstrap-clone/Images/github.svg" alt="github"></a></li>
        <li><a href="#"><img src="/bootstrap-clone/Images/twitter.svg" alt="twitter"></a></li>
        <li><a href="#"><img src="/bootstrap-clone/Images/slack.svg" alt="slack"></a></li>
        <li><a href="#"><img src="/bootstrap-clone/Images/google.svg" alt="google"></a></li>
        <li><a href="#"><button>Download</button></a></li>
      </ul>
      
    </nav>


  </header>

내 시도한 해결책 :

header {
    border: 1px solid #2d2d2d;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  };

문제는 위의 CSS 코드에서 justify-content : space-evenly; 를 사용할 때 UL 목록을 함께 집계 한 결과이므로

로고 ............ 홈 스토어 정보 검색 연락처 button

답변1

Flex는 전체 하위 트리가 아닌 자식 요소에만 적용됩니다. nav 내부로 로고를 이동하고 거기에 플렉스를 적용합니다.

header nav {
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

ul {
  background: pink; <!-- demo only -->
}

<header>
  <nav>
    <img src="https://via.placeholder.com/80" alt="bootstraplogo" class="boostraplogo">

    <ul class="leftbar">
      <li><a href="#"></a>Home</li>
      <li><a href="#"></a>Documentation</li>
      <li><a href="#"></a>Examples</li>
      <li><a href="#"></a>Icons</li>
      <li><a href="#"></a>Themes</li>
      <li><a href="#"></a>Expo</li>
      <li><a href="#"></a>Blog</li>
    </ul>

    <ul class="rightbar">
      <li>v4.5</li>
      <li><a href="#"><img src="https://via.placeholder.com/20" alt="github"></a></li>
      <li><a href="#"><img src="https://via.placeholder.com/20" alt="twitter"></a></li>
      <li><a href="#"><img src="https://via.placeholder.com/20" alt="slack"></a></li>
      <li><a href="#"><img src="https://via.placeholder.com/20" alt="google"></a></li>
      <li><a href="#"><button>Download</button></a></li>
    </ul>
  </nav>
</header>

Expand snippet

답변2

flex 는 < header > 에만 적용되지만 < img > 및 2 < ul > s to flex. 그래서 < nav > 를 제거하겠습니다.

<header>
    <img src="..." alt="bootstraplogo" class="boostraplogo">
    <ul class="leftbar">
        <li>...</li>
    </ul>
    <ul class="rightbar">
        <li>...</li>
    </ul>
</header>

그런데 CSS 블록 뒤에 ; 를 추가하지 마세요.

header {
    border: 1px solid #2d2d2d;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
} /* no ; here */

 

 

 

 

출처 : https://stackoverflow.com/questions/63180333/how-to-denote-two-ul-lists-as-two-different-items-in-parent-container-for-html