javascript - ul中三个li左浮动，第一个li自动换行高度自适应有个右边框，第二个li高度怎么能跟第一个li高度一样-PHP中文网问答

下面是js动态添加的ul包含三个li，代码如下

html




    
    任务一
    
    


支付宝信息


已添加的支付宝
还没有账号！


var inputInfo = document.getElementById('inputInfo');
var oDetail = document.getElementById('detail');
var oBtn = document.getElementById('btn');
var oDescription = document.getElementById('description');
var idc = 0;

oBtn.onclick = function(){
    
    if(inputInfo.value != ""){
        oDetail.className = "detail";
        oDescription.innerHTML = "";

        var ul = document.createElement('ul');
        ul.innerHTML = ''+inputInfo.value+'
';
        oDetail.appendChild(ul);
        inputInfo.value = "";
    }
    

    document.getElementById('id_'+idc).onclick = function(e){
        var oDefault1 = detail.getElementsByClassName('default1');
        for(var i=0; i


css
body, p, ul, li{
    margin: 0;
    padding: 0;
}

#top{
    font-size: 14px;
    color: #999;
    margin: 10px;

}

#bottom{
    font-size: 14px;
    color: #000;
    margin-left: 10px;
}

#inputInfo{
    width: 260px;
    height: 38px;
    font-size: 16px;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 6px; 

}

#btn{
    width: 50px;
    height: 36px;
    border: 1px solid #888;
    border-radius: 6px;
    background: none;
}

#btn:focus{
    outline: none;
}
.detail_pre{
    width: 360px;
    border: 2px solid #ADD8E6;
    margin-left: 10px;    
}
.detail{
    width: 360px;
    border-top: 2px solid #ADD8E6;
    border-right: 2px solid #ADD8E6;
    border-left: 2px solid #ADD8E6;
    margin-left: 10px;
}
#detail ul{
    border-bottom: 2px solid #ADD8E6;
    overflow: auto;    
}
#detail li{
    padding: 2px;
    vertical-align: middle;
    text-align: center;
    float: left;
    list-style: none;
}
#detail .account_number{
    width: 192px;
    border-right: 1px solid #B0E0E6; 
    word-break: break-all;        /*自动换行*/
}
#detail .del{
    width: 34px;
    height: 100%;
    vertical-align:  middle;
}
#detail .deleteBtn{
    border: none;
    background: none;
}
#detail .deleteBtn:focus{
    outline: none;
}
#detail .defaultBtn{
    border: none;
    background: none;
}
#detail .defaultBtn:before{
    content: "【设置默认】";
}
#detail .defaultBtn:focus{
    outline: none;
}
#detail .default0{
    width: 120px;
    height: 100%;
    border-right: 1px solid #B0E0E6; 
}
#detail .default1{
    color: #00f;
}
#detail .default1:before{
    content: "默认";
}