1

これがフィドルです。私は食料品リスト Web アプリを作成しています。ボタンをクリックすると、チェックボックスと必要なものが表示されます。チェックボックスのスタイルを設定したかったので、自分で作成しました。しかし、チェックボックスを作成すると、それに付随するテキストが div の下部に表示されます。

PSコードはセクション全体です。

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

1 に答える 1

1

テキスト(i)を div に入れ、両方の div を display: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();
        });
    }
 });
});
于 2013-09-30T15:03:54.543 に答える