国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 怎麼修改css,就可以達(dá)到這樣的效果
學(xué)習(xí)ing
學(xué)習(xí)ing 2017-07-05 11:06:58
0
2
1143

現(xiàn)在實(shí)作的效果是:

#我想下面不要滾動(dòng)條,紅框內(nèi)的完整的顯示在彈出框的右邊,這樣怎麼實(shí)現(xiàn)?

類似下面:


(這個(gè)是ps的)

下面是我的程式碼,需要做怎麼樣的修改,就可以實(shí)現(xiàn)上面的要求?謝謝! !

下面是程式碼:
html:

<p class="select-event in" id="selectEvent" style="display: block;">
    <p class="back" onclick="hideSelectEvent()"></p>
    <ul class="con" onclick="selectEvent(this)">
        <li value="A組" class="group">A組
            <ul class="mem-list active">
                <li class="mem">張三</li>
                <li class="mem">李四</li>
                <li class="mem">王五</li>
            </ul>
        </li>
        <li value="B組">B組</li>
        <li value="C組">C組</li>
        <li value="D組">D組</li>
        <li value="E組">E組</li>
        <li value="D組">D組</li>
    </ul>
</p>

CSS程式碼:

.select-event{position:fixed;top:0;bottom:0;left:0;right:0;display: none;z-index: 10000}
.select-event.in{display: block}
.select-event .back{position: relative;height:100%;width:100%;background-color: #000;opacity: 0;z-index: 99999;-webkit-transition: opacity linear 300ms;transition: opacity linear 300ms;}
.select-event.in .back{opacity: .5;}
.select-event .con{position: absolute;top:50%;left:50%;width:200px;border-radius: 3px;margin-left: -110px;margin-top: -150px;max-height:430px;overflow-y:auto;padding:15px;z-index:100000;background-color: #fff;opacity: 0;-webkit-transition: opacity linear 300ms;transition: opacity linear 300ms;}
.select-event.in .con{opacity: 1;}
.select-event .con>li{padding: 10px;height:18px;border: 1px solid #ccc;margin-top: 3px;border-radius: 2px;position: relative;cursor: pointer;}
.select-event .con>li:hover{border-color: #4DC476}
.select-event .con>li.active{border-color: #4DC476}

.select-event .con .mem-list{position: absolute;right:-101px;top:-1px;width:100px;padding-top:1px;z-index: 100001;background-color: #fff;border:1px solid #4DC476;display: none;}
.select-event .con .mem-list.active{display: block;}
/*.select-event .con .mem-list::before{content: "";display: block;position: absolute;left:-16px;top:2px;border: 8px solid transparent;border-right-color: #ccc;}
.select-event .con .mem-list::after{content: "";display: block;position: absolute;left:-15px;top:2px;border: 8px solid transparent;border-right-color: #fff;}
.select-event .con .mem-list:hover::before{border-right-color: #efefef;}
.select-event .con .mem-list:hover::after{border-right-color: #efefef;}*/
.select-event .con .mem-list::before{content: "";display: inline-block;position:absolute;background-color: #fff;left:-1px;top:0;height: 38px;width:1px;}
.select-event .con .mem-list .mem{padding: 10px;margin-top: -1px;}
.select-event .con .mem-list .mem:hover{background-color: #efefef;}
.select-event .con .group-box{position: absolute;top:10px;right:0;width:100px;height:200px;border:1px solid #4DC476;background-color: #fff;z-index: 10000;}
學(xué)習(xí)ing
學(xué)習(xí)ing

全部回覆(2)
我想大聲告訴你

小方塊作為大塊的子元素,父元素position 設(shè)定relative ,子元素為absolute.這樣子元素就可以相對(duì)父元素設(shè)定left偏移值。前提是,父元素overflow 別hidden

習(xí)慣沉默

使用絕對(duì)佈局呀,子級(jí)使用absolute。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板