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

回答

相關問題