div 오른쪽에 텍스트 표시하기

Question

Here은 바이올린입니다. 식료품 목록 웹 앱을 만들고 있는데, 버튼을 클릭하면 체크 박스가 생기고 원하는 것을 제공합니다. 내 체크 박스의 스타일을 지정하려고 했으므로 직접 만들었습니다. 그러나 체크 박스를 만들면 해당 텍스트가 div의 맨 아래에 나타납니다.

P. 코드는 전체 섹션입니다.

HTML (전체뿐만 아니라 체크 박스) :

<div id='top'>Kitchen List</div> 
<br /> 
<input type='text' id='input'><button id='click'>Add</button> 
<ol> 

</ol> 
<div id='error'>Please enter a grocery item<br /><button id='eb'>Close</button></div> 

CSS :

body { 
    margin: 0; 
    padding: 0; 
    background: #252525; 
    color: #96f226 
} 
#top { 
    width: 100%; 
    height: 40px; 
    background: #96f226; 
    text-align: center; 
    font-size: 30px; 
    color: #252525; 
} 
#input { 
    background: #4a4a4a; 
    border: 1px solid #454545; 
    color: #96f226; 
} 
#input:hover { 
    background: #656565; 
} 
#input:focus { 
    box-shadow: 0 0 30px #96f226 
} 
#click { 
    background: #4a4a4a; 
    border: 1px solid #454545; 
    border-radius: 0; 
    color: #96f226; 
    cursor: pointer; 
} 
#click:hover { 
    background: #656565; 
} 
#click:active { 
    box-shadow: 0 0 30px #96f226; 
} 
#error { 
    height: 55px; 
    width: 100%; 
    background: red; 
    text-align: center; 
    font-size: 23px; 
    color: orange; 
} 
#eb { 
    background: orange; 
    color: red; 
    border-radius: 0; 
    border: 0; 
    cursor: pointer 
} 
#eb:hover { 
    background: #e59400; 
} 
#eb:active { 
    box-shadow: 0 0 30px #e59400; 
} 
.check { 
    width: 15px; 
    height: 15px; 
    background: #4a4a4a; 
} 

JS/jQuery를 :

$(document).ready(function(){ 
    $('#error').hide(); 
    $('#click').click(function(){ 
     var i = $('#input').val(); 
     if (i != "") { 
      $('ol').prepend('<div class="check"></div> ' + i + '<br /><br />'); 
     } 
     else { 
      $('#error').show(); 
      $('#eb').click(function(){ 
       $('#error').hide(); 
      }); 
     } 
    }); 
}); 

Answer 1

사업부에 텍스트 (i)를 넣고 설정 두 div 표시 할 : 인라인 블록.

$(document).ready(function(){ 
$('#error').hide(); 
$('#click').click(function(){ 
    var i = $('#input').val(); 
    if (i != "") { 
     $('ol').prepend('<div class="check" style="display:inline-block"></div> <div style="display:inline-block">' + i + '</div><br /><br />'); 
    } 
    else { 
     $('#error').show(); 
     $('#eb').click(function(){ 
      $('#error').hide(); 
     }); 
    } 
}); 
});