请问在css中如果给一个div设置了伸缩属性,那么他里面的子元素,例如a,是不是就变成了行内块元素? 20
例如a,是不是就变成了行内块元素,可以为其设置宽高了,例如以下代码:<divclass="search-bar"><divclass="search"><inputtyp...
例如a,是不是就变成了行内块元素,可以为其设置宽高了,例如以下代码:
<div class="search-bar">
<div class="search">
<input type="search" placeholder="搜索:目的地">
</div>
<a href="#">我的</a>
</div>
css样式:
.search-bar {
width: 100%;
display: flex;
height: 44px;
background-color: #ccc;
}
.search {
position: relative;
flex: 1;
background-color: #0ff;
padding: 0 10px;
}
.search-bar a {
width: 46px;
height: 44px;
text-align: center;
}
.search input {
width: 100%;
height: 30px;
border-radius: 15px;
margin-top: 7px;
padding-left: 24px;
}
.search::before {
position: absolute;
content: "\e60f";
left: 16px;
top: 16px;
font-family: "iconfont";
}
.search-bar a::before {
display: block;
width: 22px;
height: 22px;
background-color: #2eaae0;
color: #fff;
border-radius: 50%;
font-size: 18px;
margin: 2px auto;
content: "\e610";
font-family: "iconfont";
} 展开
<div class="search-bar">
<div class="search">
<input type="search" placeholder="搜索:目的地">
</div>
<a href="#">我的</a>
</div>
css样式:
.search-bar {
width: 100%;
display: flex;
height: 44px;
background-color: #ccc;
}
.search {
position: relative;
flex: 1;
background-color: #0ff;
padding: 0 10px;
}
.search-bar a {
width: 46px;
height: 44px;
text-align: center;
}
.search input {
width: 100%;
height: 30px;
border-radius: 15px;
margin-top: 7px;
padding-left: 24px;
}
.search::before {
position: absolute;
content: "\e60f";
left: 16px;
top: 16px;
font-family: "iconfont";
}
.search-bar a::before {
display: block;
width: 22px;
height: 22px;
background-color: #2eaae0;
color: #fff;
border-radius: 50%;
font-size: 18px;
margin: 2px auto;
content: "\e610";
font-family: "iconfont";
} 展开
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询