jQuery - List Flickr photos in one column using <ul><li></li></ul> tags

I have the following code...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Flickr</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#photoform').submit(function () {
                var keyword = $('#keyword').val();

                $('#photolist').html('Please wait...');
                $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + keyword + '&format=json&jsoncallback=?',
                    function (data) {
                        $('#photolist').empty();
                        $.each(data.items, function (index, item) {
                            $('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />');
                        });
                    }
                );

                return false;
            });
        });
    </script>

    <style type="text/css">
        #photos {
            margin-top: 20px;
        }
        #photos img {
            height: 200px;
            width: 250px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div data-role="page" id="photos">
        <form method="get" name="photoform" id="photoform">
            Keyword: <input type="text" name="keyword" id="keyword" value="" /><input type="submit" name="findphoto" id="findphoto" value="Find" />

            <ul data-role="listview" data-filter="false" id="photolist"></ul>
        </form>
    </div>
</body>
</html>

I want to display the Flickr API photos into one column using the

<ul><li></li></ul>

tags. Refer to the $.getJSON in the code for an example. But when I run it, it doesn't spit out the photos in one column. It spits them out in 5 columns. Any suggestions?

Solution

I'm looking at a part of your code here:

$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />');

This suggests that the images will be shown one on top of the other. If that is the case and you are not happy with that, it should suggest that you want the images next to each other in one line.

if that is true you should change the line above to the one below:

$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li>');

also add the following in the stylesheet declarations:

ul#photolist li{
width: 20%;
display: inline-block;
}