jQuery - 使用 <ul><li></li></ul> 标签在一列中列出 Flickr 照片答案

【问题标题】：jQuery - List Flickr photos in one column using <ul><li></li></ul> tagsjQuery - 使用 <ul><li></li></ul> 标签在一列中列出 Flickr 照片
【发布时间】：2015-04-27 23:34:24
【问题描述】：

我有以下代码...

<!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>

我想使用

将 Flickr API 照片显示在一列中

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

标签。有关示例，请参阅代码中的 $.getJSON。但是当我运行它时，它不会在一列中吐出照片。它将它们分成 5 列。有什么建议吗？

【问题讨论】：

您不应在<li></li> 元素之间添加<br/> 标签。这是无效的 HTML。尝试删除 append 语句末尾的 <br/>。

标签： jquery html flickr

【解决方案1】：

我在这里查看您的部分代码：

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

这表明图像将一个在另一个之上显示。如果是这种情况并且您对此不满意，则应该建议您希望图像在一行中彼此相邻。

如果是这样，您应该将上面的行更改为下面的行：

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

还在样式表声明中添加以下内容：

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

【讨论】：

我实际上希望他们一个在另一个之上。但不知何故，当我运行它时，它不会相互堆叠。它将它们显示在一行中。
尝试将 style.css 更改为以下 'ul#photolist li{ width: 100%;显示：块； }' 也必须删除换行符
您能否将问题标记为已回答。很高兴一切顺利