html - 子 ul 的 Css 垂直显示内联到主 ul

Question

我正在尝试测试一个布局，我将在其中放置一个小图像，并在其下方显示文件详细信息。

我将 html 和 css 设置为使用带有列表项的 ul 标记。显示是这样的

我希望文件属性(现在我只使用了三个，但可能还有更多)显示在图像下方，图像的左边缘和文件标题对齐。我似乎无法将它们放在图像下方并对齐。许多尝试，但它们似乎总是在图像的右侧。

div {
  width: 660px;
  margin: 0 auto;
  overflow: auto;
}

ul {
  list-style-type: none;
}

li ul {
  display: block;
}

li ul li {
  display: block;
}

li img {
  float: left;
  margin: 5px;
  border: 5px solid #333;
}

li img:hover {
  border: 5px solid lightblue;
}

<div class="row">
  <div>
    <ul>
      <li>
        <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a>

        <ul>
          <li><b>File:</b> DeWalt_GE_FullView.jpg</li>
          <li><b>Size:</b> 43,657 bytes</li>
          <li><b>Type:</b> image/jpeg</li>
        </ul>
      </li>
      <li>
        <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a>
      </li>
      <li>
        <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a>
      </li>
      <li>
        <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a>
      </li>

    </ul>
  </div>
</div>

Answer 1

我会建议摆脱 float ，重组你的代码，这样它就不会与 li 和 ul 混淆，然后尝试使用 flexbox:

.wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 600px;
	margin: 0 auto;
	overflow: auto;
}

.file-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}


.file-box img {
    margin: 5px;
    border: 5px solid #333;
}

.file-box img:hover {
    border: 5px solid lightblue;
}


.file-details p {
    margin: 0;
}

<div class="wrapper">
	<div class="file-box">
		<a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a>
		<div class="file-details">
			<p>File: DeWalt_GE_FullView.jpg</p>
			<p>Size: 43,657 bytes</p>
			<p>Type: image/jpeg</p>
		</div>
	</div>
		<div class="file-box">
		<a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a>
		<div class="file-details">
			<p>File: DeWalt_GE_FullView2.jpg</p>
			<p>Size: 44,657 bytes</p>
			<p>Type: image/jpeg</p>
		</div>
	</div>
		<div class="file-box">
		<a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a>
		<div class="file-details">
			<p>File: DeWalt_GE_FullView3.jpg</p>
			<p>Size: 45,657 bytes</p>
			<p>Type: image/jpeg</p>
		</div>
	</div>
</div>