html - 如何让图片水平显示

Question

我正在为我的一个网站构建一个作品集并下载了一个模板，我设法将它实现到我自己的网站中，但我很难水平显示它，现在它全部垂直显示。我的代码如下:

HTML 代码

       <div id="portfolio">
        <div class="content center">
            <h2>PORTFOLIO</h2>
            <div class="borderline"></div>
      </div>
       <!--Portfolio grid-->

  <ul class="portfolio-grid" id="portfolio-sidebar">


    <li class="grid-item">
      <img src="img/portfolio/1.jpg">
        <a class="ajax-link" href="single.html">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>  
    </li>

    <li class="grid-item">
      <img src="img/portfolio/5.jpg">
        <a class="ajax-link" href="single-fullscreen.html">  
          <div class="grid-hover">
            <h1>Full Screen</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>    

    <li class="grid-item">
      <img src="img/portfolio/2.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>  

    <li class="grid-item">
      <img src="img/portfolio/3.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>    

    <li class="grid-item">
      <img src="img/portfolio/4.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>    

    <li class="grid-item">
      <img src="img/portfolio/6.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>  

  </ul>

  </div>

CSS

  /*2.2. Portfolio
**********************************************************************/
#ajax-content{width:100%;}

.portfolio-grid{
  width:1170px;
  position:relative;
  margin: 30px auto;
  overflow:hidden;
}

#portfolio-sidebar{
  width: 780px !important;
  padding-right: 390px;

}

li.grid-item{
  width:360px;
  position:relative;
  padding:15px;
  display:block;
}

.grid-hover{
  position: absolute;
  width:360px;
  height: 100%;
  top:0;
  background: white;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in; 
}

.grid-hover:hover{
  opacity: 0.9;
}

.grid-hover h1{
  font-size:23px;
  bottom:80px;
  left:40px;
  position:absolute;
  text-transform:uppercase;
  color:#000000;
  letter-spacing:1px;
  font-weight:900;
  line-height:50px;
}

.grid-hover p{
  font-size:13px;
  bottom:40px;
  left:40px;
  position:absolute;
  color:#686868;
  letter-spacing:1px;
  font-weight:400;
  line-height:50px;
}

li.grid-item img{
  width:360px;
}

JSFIDDLE https://jsfiddle.net/3hwvvbod/

Answer 1

您有这些规则阻止它水平显示:

li.grid-item{
  width: 360px;
  padding: 15px;
  display: block; /*key*/
}

将其更改为:

li.grid-item{
  display: inline-block;
}

并调整width的 .portfolio-grid/#portfolio-sidebar会有所帮助。请注意，对于相同的属性，第一个将被第二个覆盖。因为你是这样设置的<ul class="portfolio-grid" id="portfolio-sidebar"> .我建议不要使用 ID 选择器来设置样式。

jsFiddle