steadily
451
2021-08-03 18:38:47 작성 2021-08-03 18:40:25 수정됨
12
226

li들이 body의 width를 넘었을 때 다음 줄로 넘어가게 하고 싶습니다.


+------ container -------+
+--- child_container ----ㅣ+
| child1 child2 child3   |
| child4                 |
+------------------------+
이런식으로 진행되게 하고 싶습니다. 현재 
<div id="container2">
<ul id="list_terms">{relatedTermsList}</ul>
</div>
이런 식으로 되어있고, relatedTermsList에 li의 값이(함수를 통해 직접 input값을 넣어주는 방식) 들어가게 됩니다
.
그래서 현재 이런 식으로, overflow 했을 때 스크롤해서 볼 수 있게 되어있습니다.
이게 스크롤이 아니라 body의 width를 넘으면 다음 줄로 가게 하고 싶습니다.
방법을 잘 모르겠네요..ㅠ 알려주시면 감사하겠습니다.
아까 올렸던 CSS 부분은 해결하여 글 내렸었고, 이부분으로 재업로드 합니다.
0
  • 답변 12

  • kenu
    56k
    2021-08-03 20:09:53

    https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

  • steadily
    451
    2021-08-03 20:36:42
    max-width 설정을 해도 overflow시 다음 줄로 넘어가지는 않습니다..
  • 포도가살찌면포동포동
    92
    2021-08-03 22:57:08

    div 에다가 width값 이랑 overflow-x:scroll 주고

    ul 에다가도 width 값 주고 

    li 에다가 float:left 걸면 되지않을까요?


    그럼 좌우로 스크롤 생기고 width 끝에 닿으면 아래로 쌓이긴한데

    이게 의도하신게 맞는건지 모르겠네요

  • steadily
    451
    2021-08-03 23:29:21

    포도가살찌면포동포동 선생님 답변 감사합니다.

    #container2 {
    width: 680px;
    overflow-x: scroll;
    }
    #list_terms {
    width: 680px;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    }
    #list_terms > li {
    padding: 8px 12px;
    text-align: center;
    float: left;
    border-radius: 18px;
    font-weight: 500;
    min-width: fit-content;
    margin: 5px 5px 0px 0px;
    color: white;
    background-color: #7d68ff;
    list-style: none;
    }

    말씀하신 것처럼 해보았는데, 좌우로 스크롤 생기는 건 맞으나 width를 고정된 값으로 줬는데도 계속 좌우 스크롤만 유지가 됩니다. width 끝에 닿으면 아래로 쌓이는 걸 의도한 게 맞는데, 어찌 안되는지 답답하네요 ㅠㅠ


  • kenu
    56k
    2021-08-03 23:48:52
    올려 주신 코드에 max-width 는 안 보이는데,
    https://jsfiddle.net/
    사이트에 올린 다음에 링크 올려 주시죠.
  • kenu
    56k
    2021-08-03 23:51:24

    혹은

    #container2 {

      width: 680px;

      overflow-x: scroll;

    }

    이 부분을 빼고 돌려 보는 것은 어떨까요?


  • steadily
    451
    2021-08-04 10:12:28

    kenu 선생님 답변 감사합니다.

    처음에 남긴 댓글은 제가 따로 max-widh 설정을 해봤지만 해결되지 않아서 저렇게 댓글을 남긴 것이었습니다. 그 이후로 우선 div태그 지우고 돌려보라는 말씀대로 해보았으나 제대로 되지 않았습니다. 

    본래 타입스크립트 + 리액트로 작성했으나, jsfiddle에서는 그렇게는 인식하지 못하는 것 같아서.. HTML과 CSS만 적용해서 만들었습니다.

    https://jsfiddle.net/2wqk1ezn/

    감사합니다.


  • 이런거 말씀하시는거 아니였나요?

    아니라면 제가 잘못알고있었는듯..

  • steadily
    451
    2021-08-04 11:42:33

    포도가살찌면포동포동 선생님 답변 감사합니다.

    네 맞습니다. body width 넘겼을 때 다음 줄로 가는거요..! 어제 말씀하신 대로 적용하신건가요 저게?? CSS 코드 알려주시면 감사하겠습니다 ㅜ


  • * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
    }
    #container2 {
      width:100%;
      overflow-x: scroll;
    }
    #list_terms {
      width: 2000px;
      padding: 0;
    }
    #list_terms > li {
      padding: 8px 12px;
      float: left;
      border-radius: 18px;
      font-weight: 500;
      min-width: fit-content;
      margin: 5px 5px 0px 0px;
      color: white;
      background-color: #7d68ff;
      list-style: none;
    }
    #list_terms > li > button {
      margin-left: 5px;
      background-color: transparent;
      color: yellow;
      border: 0;
      outline: 0;
    }

    flex 부분은 제거했습니다 

    #list_terms 는 x축 스크롤이라 얼만큼 x축 길이를 하실지 조절하시면되요

    그냥 2000px로 한거에요 조절하세요

    어제 제가 말씀드린 그대로 적용한거에요

  • steadily
    451
    2021-08-04 13:52:05
  • steadily

    저도 css 공부중인데 도움이 되었다니 좋네요 ㅋ

  • 로그인을 하시면 답변을 등록할 수 있습니다.