javascript - Drei li's in ul schweben nach links. Die Höhe des automatischen Zeilenumbruchs des ersten li hat einen rechten Rand. Wie kann die Höhe des zweiten li mit der Höhe des ersten li übereinstimmen?-Fragen und Antworten zum chinesischen PHP-Netzwerk

Das Folgende ist das ul, das von js dynamisch hinzugefügt wird und drei Li enthält. Der Code lautet wie folgt

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: "默认"; }