账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    css中使用inline-block布局的问题
    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元素被设置为行内元素,这意味着它可以包含其他元素,但它的宽度和高度是不可控的。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部