- 69
- 0
我在开发一个移动端网页,想写一个头部元素,内容包含城市选择,搜索框和类别选择,我想让这三个元素平行显示且两端对齐。但是我的程序不知道什么原因右端无法对齐。
<div id="mallHeader" class="item-box">
<div class="item align-center">
<span>北京<i class="iconfont icon-caret"></i></span>
<span><i class="iconfont icon-sousuo"></i><input type="search" placeholder="搜索" name="search"></span>
<span><i class="iconfont icon-jishiben"></i><p>兴趣</p></span>
</div>
</div>
css:
#mallHeader {
width: 100%;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: justify;
background-color: lightblue;
background-size:100%;
height: 4.666666rem;
margin: 0 auto;
.item {
margin: 0.8rem 0.266666rem 0.266666rem;
vertical-align: middle;
position: fixed;
text-align: center;
span {
@include font-dpr(14px);
text-align: center;
vertical-align: middle;
display: block;
position: relative;
margin:0 auto;
padding-left:0.1rem;
padding-right:0.1rem;
input {
width: 7.04rem;
height: 0.8rem;
border-radius: 0.4rem;
padding-left: 0.773333rem;
}
i {
text-align: center;
}
p {
text-align: center;
/*line-height: 0.4rem;*/
@include font-dpr(8px);
vertical-align: middle;
}
.icon-sousuo {
position: absolute;
margin-left: 0.24rem;
line-height: 0.8rem;
}
}
}
}
我用chrome的console看的时候发现.item没有100%width,要如何修改呢? 谢谢。
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
★孤寂←天空☆ 普通会员 1楼
在CSS中,inline-block布局是一种在行内元素中使用块级元素的布局方式。这种布局方式的优点是可以在一行内容纳多个元素,且可以进行对齐、对齐方式和垂直对齐等操作。然而,inline-block布局也有一些缺点,如在某些情况下可能会导致元素的宽度和高度不可控,从而影响布局的美观性。
在CSS中,如果你想要使用inline-block布局,你需要将元素设置为块级元素,而不是行内元素。例如,你可以这样做:
css .container { display: inline-block; }在这个例子中,
.container元素被设置为块级元素,这意味着它可以包含其他元素,并且它的宽度和高度是可控制的。如果你想要使用行内元素,你需要将元素设置为行内元素。例如,你可以这样做:
css .container { display: inline; }在这个例子中,
.container元素被设置为行内元素,这意味着它可以包含其他元素,但它的宽度和高度是不可控的。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

