inflearn logo
강의

Course
Instructor

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

Extended Selectors & checked pseudo-class: Practical Publishing 07 (Testimonial Tab Slider)

가로 정렬할 때

877

polepole7777

24 asked

1

.items div{

    width: 800px;

    height: 400px;

    float: left;

    padding: 40px;

    box-sizing: border-box;

}

float: left를 주지 말고 display: inline block을 줘도 되지 않나요?
너비값 주고 가로정렬 하는 역할이니까 써도 될 것 같은데

근데 써보니까 출력이 반쯤 잘려서 나오네요

HTML/CSS jquery

Answer 2

3

codingworks

float: left 대신에 display: inline-block으로 가로배치하셔도 됩니다.
단, 인라인블록의 경우 우측에 마진이 5~6픽셀 생기기 때문에 margin-right: -5px에서 -6px 이렇게 해줘야 합니다.
그래야 부모요소인 .items 안에 자식요소인 .items div 가 들어옵니다.

코드에는 문제가 없어 보이는데 .items div 겹치는 부분이 중앙에 있을까요?
.items의 부모요소의 코드가 보이지 않는데 그 부분을 보면 더 잘 알 것 같습니다.

0

gudghk04305966

 <div class="tab-inner">
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2">
        <input type="radio" name="tabmenu" id="tab3">
        <h1>Testimonials</h1>
        <div class="tabs">
            <div class="items">
                <div>Content1</div>
                <div>Content2</div>
                <div>Content3</div>
            </div>
        </div>
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
    </div>
 
 

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}









.tab-inner{
    height: 500px;
    border:1px solid green;
}

input[name=tabmenu]{
display: none;
}

.tabs{
border:1px solid red;
width: 3600px;
height: 400px;
position: relative;
}

.items{
    height: 400px;
    position: absolute;
    top:0;
    left: 0;
    transition: 0.5s;
}


.items div{
    float: left;
    border:1px solid blue;
    width: 1200px;
    height: 400px;
    box-sizing: border-box;
}

.btn{
    text-align: center;
}

.btn label{
    width: 10px;
    height: 10px;
    background-color: lightgray;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

























 
 
 
이렇게하면,, 버튼이 content1내에서 가운데정렬이아니라
전체 3박스에서 가운데정렬이되는데 왜그런것일까요?.
 

class 값 한 번에 부여하는법

2

80

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

69

1

div#css-checker-widget의 해결방

1

60

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

79

2

강의듣는법

1

73

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

68

2

input checked 질문합니다.

0

76

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

140

2

Part 1 영상 안나옵니다

1

88

1

제이쿼리 작동이 안됩니다

1

199

3

강의 내용 질문있습니다.

1

120

2

일정 부분만 주석하는 방법

1

211

2

폰트어썸

1

134

2

인접선택자에 대한 질문드립니다!

1

129

2

delay 적용 안됨

1

134

1

rotateY(360deg)가 적용이 안됩니다!

1

186

2

세로이동할때 height값

1

138

2

폰트어썸이 안되요..

1

485

2

화면 정중앙에 오게끔 할수있나요?

1

169

1

어코디언 네비게이션 중

1

124

1

라이브서버 문제

1

225

2

넷플릭스 어코디언 예제 질문

1

102

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

154

1

active 관련 질문

1

145

2