在我的代码中需要CSS定位方面的帮助

Question

我一直在努力使用一些CSS Style。问题是我无法正确定位图像。由于某种原因，图像没有以适当的预期流量显示。而且我也希望集中整个内容。调整浏览器大小时，它无法正确集中。复制过我的代码后，您可以轻松地注意到所有这些问题。这是我的代码。谢谢 HTML

＆＃13;

＆＃13;

    body {
        font-family: 'Open sans',sans-serif; 
    } 
    
    #content p {
        padding: 5px;
        font-size: 0.8em;
    }
    
    #wrap {
        max-width: 900px;
        padding: 3%;
        margin: 0 auto;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    #contact a {
        padding-left: 35px;
        background-repeat: no-repeat;
        background-size: 20px;
    }
    #content a {
        width: 100%;
        display: inline-block;
        height: 100%;
    }
    
    #content li img {
        width: 100%;
    }
    
    a {
        text-decoration: none;
    }
    
    #content li {
        float: left;
        width: 25%;
        margin: 3%;
        box-sizing: border-box;
        background-color: bisque;
    } 
    footer {
        clear: both;
        text-align: center;
    }
    
    footer img {
        width: 25px;
    }
    
    h1 {
        font-weight: normal;
        font-family: 'Change one', sans-serif;
        color: #fff;
        font-size: 2.4em;
        padding: 0px;
        margin: 0px;
        display: inline-block;
    }
    
    h2 {
        font-size: .9em;
        font-weight: normal;
        color: #fff;
        margin: 10px 0;
    }
    
    #content ul { 
        padding: 0;
        margin: 0;
    }

＆＃13;

        <div id="wrap">
              <div id="content">
                <ul>
                  <li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg"> 
                    <p>Experimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg"> 
                    <p>Experimentation with color and texture Experimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg"> 
                    <p>Experimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg"> 
                    <p>Experimentation with color and textureExperimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg"> 
                    <p>Experimentation with color and texture</p></a>
                  </li>
                </ul>
              </div>
        
              <footer>
                <img src="img/twitter-wrap.png">
                <img src="img/facebook-wrap.png"> 
                <p>&copy; 2014 Chimed.</p>
              </footer>
            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是<p>元素中的一些文本项包装为3行，有些只包含2行。这使得他们比其他人更高。当下一个<li>换行到下一行时，它最终会位于较高项目的右侧。

直观地表示：

要解决此问题，您可以尝试将所有项目设置为相同的高度。这样他们就可以完全包裹在一起。

Answer 2

两个＆＃34;问题＆＃34;在你的代码中，我到目前为止看到了。

您正试图将您的内容集中在一起并使用#wrap进行操作。但是列表中的列表元素每个宽度为25％，加上边缘的边距为3％，因此总数为31％。因此，最接近100％宽度的周围元素是93％，在右侧留下间隙，因为列表元素的float: left。这应该可以解决问题：

ul {
    width: 93%;
    margin: 0 auto;
    list-style-type: none;
    padding: 0;
}

#content li {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin: 3%;
    box-sizing: border-box;
    background-color: bisque;
}

我为ul添加了宽度和居中边距，您的li元素现在是内联块并在其顶行对齐。