Css为sub ul垂直显示主ul ul

我想测试一个布局，其中我将有一个小图像与文件详细信息下面。Css为sub ul垂直显示主ul ul

我设置了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>

来源

2017-05-04 dinotom

为什么你将图像浮动到左边？ –

我建议摆脱花车，重组你的代码，所以它不是李肇星和UL的这么混乱，然后尝试使用Flexbox的：

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

 
.file-box { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t 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"> 
 
\t <div class="file-box"> 
 
\t \t <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
\t \t <div class="file-details"> 
 
\t \t \t <p>File: DeWalt_GE_FullView.jpg</p> 
 
\t \t \t <p>Size: 43,657 bytes</p> 
 
\t \t \t <p>Type: image/jpeg</p> 
 
\t \t </div> 
 
\t </div> 
 
\t \t <div class="file-box"> 
 
\t \t <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
\t \t <div class="file-details"> 
 
\t \t \t <p>File: DeWalt_GE_FullView2.jpg</p> 
 
\t \t \t <p>Size: 44,657 bytes</p> 
 
\t \t \t <p>Type: image/jpeg</p> 
 
\t \t </div> 
 
\t </div> 
 
\t \t <div class="file-box"> 
 
\t \t <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
\t \t <div class="file-details"> 
 
\t \t \t <p>File: DeWalt_GE_FullView3.jpg</p> 
 
\t \t \t <p>Size: 45,657 bytes</p> 
 
\t \t \t <p>Type: image/jpeg</p> 
 
\t \t </div> 
 
\t </div> 
 
</div>

来源

2017-05-04 19:11:24 StefanBob

@StefanBob ...不是一个CSS常规，只是试图建立一些管理工具..didnt知道flexbox ..看起来不错，但id喜欢消除行间距节省空间..我想我可以改变CSS的你使用的p标签。 – dinotom

是的，我是说要改变span标签，但是除非你设置跨度显示：block;不妨将p边距改为0.我编辑的答案 – StefanBob

您的代码段正确运行，但在我的mvc页面中，文本正确缩进约5-10px – dinotom

Css为sub ul垂直显示主ul ul

回答

相关问题