在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ css中使用inline-block布局的問題

css中使用inline-block布局的問題

我在開發(fā)一個(gè)移動(dòng)端網(wǎng)頁(yè),想寫一個(gè)頭部元素,內(nèi)容包含城市選擇,搜索框和類別選擇,我想讓這三個(gè)元素平行顯示且兩端對(duì)齊。但是我的程序不知道什么原因右端無法對(duì)齊。

<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看的時(shí)候發(fā)現(xiàn).item沒有100%width,要如何修改呢? 謝謝。

回答
編輯回答
萌面人

.itemposition: fixed;去掉就居中了

2017年9月10日 04:23
編輯回答
青黛色

你這個(gè)是什么框架???我怎么沒見過啊

2018年9月9日 19:30
編輯回答
尐懶貓

我推薦你使用 flex 布局可以更好的滿足你的業(yè)務(wù)需要,而且手機(jī)端對(duì)彈性布局的支持也很好。你的代碼也會(huì)更整潔。鏈接描述

2017年12月13日 01:52
編輯回答
她愚我

推薦 flex 布局
justify-content space-around
align-items center

2017年5月27日 23:43