html - 正确对齐 li 元素

Question

我试图将每个 li 元素放在它自己的行中。每个 li 元素在左侧包含一个 img 和一些文本作为描述。还有一个要求，一切都应该是响应式的。现在，编写的代码已经足够响应了，但它并没有将每个 li 元素分开放置。这是代码:

.portfolio-images {
  margin: auto auto auto 30px;
}
.portfolio-image {
  float: left;
  margin: auto 10px 10px 5px;
}
#portfolio-images ul {
  list-style: none;
}
.portfolio-images li {
  display: block;
}

<div class="container-fluid" id="portfolio-images">
  <ul>
    <li>
      <img class="portfolio-image img-responsive" src="http://i64.tinypic.com/2ltg2h4.jpg">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li>
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li>
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>    
    
  </ul>
</div>

请帮忙解决这个问题。

Answer 1

您还没有清除 .portfolio-images 的 float 。有many ways为此，在本例中，我在 .item 类上使用了 overflow: auto，我已将其应用于所有 li 标记:

.item {
  overflow: auto;
}
.portfolio-images {
  margin: auto auto auto 30px;
}
.portfolio-image {
  float: left;
  margin: auto 10px 10px 5px;
}
#portfolio-images ul {
  list-style: none;
}
.portfolio-images li {
  display: block;
}

<div class="container-fluid" id="portfolio-images">
  <ul>
    <li class="item">
      <img class="portfolio-image img-responsive" src="http://i64.tinypic.com/2ltg2h4.jpg">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li class="item">
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li class="item">
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>    
    
  </ul>
</div>