子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

我建议摆脱花车，重新调整你的代码，这样就不会让我和它们混淆，然后尝试使用flexbox：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;