Question

我已将这三张图片添加到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边距）但是一旦我将其添加到网站（运行二十二个主题的wordpress平台），它似乎增加了边距。

我似乎无法改变这一点......任何能够帮助解决这个问题的人？

该网站是www.pacificexpress.com.au

欢呼

James M.

Answer 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;
}

二十二个Wordpress为图像添加额外的边距

1 个答案: