<template>
<div id="app">
<el-row :gutter="10">
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<div class="myimg">
<img src="/images/logo.png" alt="">
</div>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<div class="myinput">
<el-input v-model="input" placeholder="请输入内容"></el-input><el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<div>
<i class="el-icon-user-solid"></i>
<i class="el-icon-message-solid"></i>
<i class="el-icon-shopping-cart-1"></i>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "MyHeader",
data(){
return{
input: ''
}
}
}
</script>
<style scoped>
#app{
height: 62px;
padding-top: 15px;
padding-bottom: 5px;
}
.myimg{
margin: 0 170px;
}
.el-input{
width: 200px;
}
.myinput{
width: 100%;
}
i{
padding-right: 30px;
}
.el-icon-user-solid:before,
.el-icon-message-solid:before,
.el-icon-shopping-cart-1:before{
font-size: 30px;
}
</style>
使用了elmentUI想实现响应式布局,可是图片的左边不会随窗口的变化而变化。是因为写死了左外边距吗?
如果不写外边距如何让图片与左边有一点的间隔吗
将元素写在col中如何调整样式呀?