水平嵌入Instagram照片的样式 [英] Style embedded Instagram Photos horizontally

问题描述

我很难为嵌入的instagram照片添加简单的样式。我想要并排放置照片，所以我使用了无序列表并设置了样式，以免被项目符号影响并水平列出它们。然而，这种风格似乎并未应用于嵌入的Instagram照片。

I am having a hard time adding a simple style to embedded instagram photos. I wanted the photos side by side so I used an unordered list and styled it so it was not bulleted and listed them horizontally. However, the style just does not seem to be applied to the embedded Instagram photos.

CSS

#instapost ul
{
list-style-type: none;
}

#instapost ul li { 
display: inline;
}

HTML

<div id="instapost">
<ul>
    <li>(copy any post from instagram and make max-width=320)</li>
    <li>(copy any post from instagram and make max-width=320)</li>
</ul>
</div>

具有嵌入的Instagram照片的完整示例可以在此处查看：
https://jsfiddle.net/edwardgam/0k7smgvk/4/

The full example with embedded Instagram photos can be seen here: https://jsfiddle.net/edwardgam/0k7smgvk/4/

（我实际上正在使用WordPress和WordPress插件 Simple Instagram Embed，所以我只复制Instagram照片的URL（而不是Instagram提供的嵌入代码）并粘贴到我的Wordpress帖子中的适当位置。但是，无论我是否使用插件，都存在此问题。

(I am actually using WordPress and a WordPress plugin 'Simple Instagram Embed' so I just copy the URL of the Instagram photo (instead of the Instagram provided embed code) and paste into the appropriate place in my Wordpress post. However, this problem exists whether I use the plugin or not).

谢谢。

推荐答案

#instapost ul li { 
    width: 320px;
    float: left;
    margin-right: 10px;
}

这篇关于水平嵌入Instagram照片的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！