Блог

Я добавил эти три изображения на сайт 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>
  

это работает при тестировании (т. Е. Три изображения располагаются в ряд с интервалом 5 пикселей между каждым изображением), однако, как только я добавляю это на веб-сайт (платформа WordPress, на которой работает тема twenty-twelve), кажется, что это увеличивает поле.

Кажется, я не могу это изменить… кто-нибудь может помочь с этим?

сайт является www.pacificexpress.com.au

приветствия

Джеймс М.

Дополнительные поля поступают из левого поля, указанного в .entry-content li селекторе, и чтобы избавиться от этого, вам просто нужно переопределить поле на <li> s на 0px.

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