Wordpress 22 为图像添加额外边距答案

【问题标题】：Wordpress twenty twelve adding extra margin to imagesWordpress 22 为图像添加额外边距
【发布时间】：2014-08-22 16:49:50
【问题描述】：

我已将这三张图片添加到 WP 网站。代码是：

<style> 
    #frontContainer { 
        max-width: 1200px; 
    }

    #frontContainer ul { 
        list-style: none;
    }

    #frontContainer li { 
        height: 599px; 
        width: 376px; 
        float: left; 
        margin-right: 5px;    
        border: 2px solid black;  
        opacity: 1; 
    }

    #frontContainer img { 
        height: 100%; 
        width: 100%;  

    } 

    #frontContainer li:hover{ 
        border: 2px solid #47B957; 
        opacity: .5;
     }

 </style>

 <div id='frontContainer'>
        <ul>
            <li><a href='http://pacificexpress.com.au/?p=975'><img src='http://i59.tinypic.com/2gt6fsp.jpg'/></a></li>
            <li><a href='http://pacificexpress.com.au/rapid-worker/'><img src='http://i61.tinypic.com/34pifd2.jpg'/></a></li>
            <li><a href='http://pacificexpress.com.au/?p=971'><img src='http://i58.tinypic.com/348ohhg.jpg'/></a></li>
            </ul>
        </div>

这在测试时有效（即三个图像排成一排，每个图像之间有 5px 的边距）但是一旦我将它添加到网站（运行 212 主题的 wordpress 平台），它似乎会增加边距。

我似乎无法改变这个......有人能帮忙吗？

该网站是 www.pacificexpress.com.au

干杯

詹姆斯·M.

【问题讨论】：

标签： html css wordpress

【解决方案1】：

额外的边距来自 .entry-content li 选择器中指定的左边距，要摆脱它，您只需用 0px 覆盖 <li>s 上的边距。

#frontContainer li {
    height: 599px;
    width: 376px;
    float: left;
    margin-right: 5px;
    margin-left: 0px;  /*or whatever other value you want*/
    border: 2px solid black;
    opacity: 1;
}

【讨论】：