使文字顯示在div的右側

Question

Here是小提琴。我正在製作一個購物清單的網絡應用程序，當你點擊按鈕時，它會出現一個複選框和你想要的。我想打樣我的複選框，所以我做了我自己的。但是，當我使複選框，與它一起的文本出現在div的底部。

P.S.代碼是整個部分。

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和設置兩個div的顯示：inline-block。

$(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(); 
     }); 
    } 
}); 
});