javascript - Three li's in ul float left. The first li's automatic line wrapping height is adaptive and has a right border. How can the height of the second li be the same as the first li's height?-PHP Chinese Network Q&A

The following is the ul dynamically added by js containing three li, the code is as follows

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

reply all (2)

曾经蜡笔没有小新2017-05-19 10:32:20 2 floor

It feels like there is no need to use ul in every line. Each line is a li and then there are various businesses inside. .

In addition, for the question raised by the subject, I have not thought about how to do it without js. I only thought of using js to detect the height of each row of ul and then set it to each li.