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

在div的右侧显示文本

1 个答案: