Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
css가 이상합니다.
Viết
·
358
2
<template>
<div class="inputBox shadow">
<input type="text" v-model="toDoItem" v-on:keyup.enter="addItem">
<span class="addContainer" v-on:click="addItem">
<i class="fas fa-plus addBtn"></i>
</span>
</div>
</template>
<script>
export default {
data: function() {
return {
toDoItem: ''
}
},
methods: {
addItem: function() {
localStorage.setItem(this.toDoItem, this.toDoItem)
this.cleanInput();
},
cleanInput: function() {
this.toDoItem = '';
}
}
}
</script>
<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, #8763FB);
display:block;
width: 3rem;
border-radius: 0 5px 5px 0;
}
.addBten {
color: white;
vertical-align: middle;
}
</style>
모두 똑같이 했는데 인풋이 들어가는 곳이 왼쪽이 아닌 가운데에 있는데 이게 body에 text-align:cener; 로 되어 있어서 그런 것 같은데 이걸 지우면 font icon plus도 가운데가 안되서 위치가 이상해집니다.
코드가 분명히 똑같은데 왜 input 타입하는 곳이 가운데서 시작하고 input 크기가 작습니다.
javascriptvuejsvuexes6
Quiz
63% người trả lời sai. Hãy thử ngay!
Ba phần thiết yếu cơ bản của thành phần tệp đơn Vue (.vue) là gì?
html, js, css
mẫu, tập lệnh, phong cách
view, data, methods
bố cục, logic, phong cách
Câu trả lời 2
1
linux-s
Người đặt câu hỏi
App.vue 코드도 올립니다
<template>
<div id="app">
<TodoHeader></TodoHeader>
<TodoInput></TodoInput>
<TodoList></TodoList>
<TodoFooter></TodoFooter>
</div>
</template>
<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
components: {
'TodoHeader': TodoHeader,
'TodoInput' : TodoInput,
'TodoList' : TodoList,
'TodoFooter' : TodoFooter
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
body {
background-color: #F6F6F6;
}
input {
border-style: groove;
width:200px;
}
button {
border-style: groove;
}
.shadow {
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03);
}
</style>
0
