-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
저는 스타일이 이상하게 적용되네요 ㅠ
22.12.13 15:23 작성 22.12.13 16:21 수정 조회수 525
1
<template>
<div class="inputBox shadow">
<input type="text" v-model="newTodoItem">
<span class="addContainer" @click="addTodo">
<i class="fa-solid fa-plus addBtn"></i>
</span>
</div>
</template>
<style scoped>
input:focus {
outline: none;
}
.inputBox {
background: white;
height: 50px;
line-height: 50px;
border-radius: 5px;
}
.inputBox input {
border-style: none;
font-size: 0.9rem;
}
.addContainer {
float: right;
background: linear-gradient(to right, #6478FB, #8763F8);
display: block;
width: 3rem;
border-radius: 0 5px 5px 0;
}
.addBtn {
color: white;
vertical-align: middle;
}
</style>
위처럼 아예 input창 크기도 안맞춰지고 span 태그도 사라져있더라구요..
왜 이상하게 나왔는지를 몰라서 임시로 아래처럼 바꿨는데 요즘은 flex를 현업에 안쓴다고 들었는데 그게 맞을까요 ??
아직 git 허가를 못받아서 ..😭
input:focus {
outline: none;
}
.inputBox {
display: flex;
align-items: center;
background: white;
height: 50px;
line-height: 50px;
border-radius: 5px;
}
.inputBox input {
height: 100%;
width: calc(100% - 3rem);
border-style: none;
font-size: 0.9rem;
}
.addContainer {
background: linear-gradient(to right, #6478FB, #8763F8);
display: block;
height: 100%;
width: 3rem;
border-radius: 0 5px 5px 0;
}
.addBtn {
color: white;
vertical-align: middle;
}
답변을 작성해보세요.
0
0
장기효(캡틴판교)
지식공유자2022.12.13
안녕하세요, 회사랑 팀마다 다르겠지만 flex나 grid 모두 최신 문법에 속하는 편이라 쓰시는게 좋습니다 ㅎㅎ 저도 레이아웃 구성할 때는 float 기반의 예전 방식보다는 최신 문법으로 하는 편이에요
답변 2