以我想要的方式對齊列表元素

我有一個帖子標題列表，其上方有精選圖片。列表中的最後一個帖子標題是兩行，因此會擾亂列表的對齊。下面是一張圖片。我希望前三個帖子向上移動以與最後一個帖子對齊。以我想要的方式對齊列表元素

代碼：

<div class="classes-links"> 
    <?php 
    $args = array(
     'post_type' => 'class', 
     'posts_per_page' => 4, 
     'order' => 'ASC' 
    ); 

    $query = new WP_Query($args); 
    ?> 

    <?php while ($query->have_posts()) : $query->the_post(); ?> 
    <a href="<?php the_permalink(); ?>"> 
     <ul><li><?php the_post_thumbnail(); ?></li> 
      <li><?php the_title(); ?></li> 
     </ul> 
    </a> 
    <?php endwhile; wp_reset_query(); ?> 
</div>

CSS：

.classes-services .classes-div .classes-links { 
    display: inline-block; 
    float: right; 
    position: relative; 
    margin: 80px 250px 0 0; 
} 

.classes-services .classes-div .classes-links a { 
    text-decoration: none; 
    color: #113337; 
} 

.classes-services .classes-div .classes-links ul { 
    display: inline-block; 
    margin: 0 auto; 
    text-align: center; 
}

來源

2015-11-13 MrDevRI

爲什麼你puttin不同'ul'內聯，而不是創造一個獨特的'ul'？無論如何，嘗試將'vertical-align：top'賦予顯示的內嵌塊的'ul'，它應該可以工作。 – Iecya

哇，我可以發誓我試過這個，工作！ – MrDevRI

@lecya，你應該真的把這些信息放在答案中，以便MrDevRI可以把它作爲一個解決方案來檢查它......我知道這可能看起來很愚蠢，但是人們不應該通過搜索評論來找到正確的答案。這對初學者很有幫助，因爲沒有多少人知道vertical-align適用於內聯項目，並且您不需要表格。 –

-1

你可以把它們放在一個表，並設置VALIGN：頂部;在tr元素上。如果您爲表格和td元素使用基於百分比的寬度，那麼如果您的應用程序響應，它將很好地彎曲。

這將對齊圖像頂端，而不是中間對齊文本和圖像。

來源

2015-11-13 17:27:41 Korgrue

'vertical-align'也適用於內聯元素，不需要更改html – Iecya

我認爲你必須將元素容器設置爲'display：table-cell'才能工作。沒有？ – Korgrue

表格只能用於表格數據，不能用於頁面佈局。例如，使用div或其他元素並用table，table-row和table-cell僞造表格顯示是很好的，因爲稍後您可以更改CSS以將佈局更改爲更具響應性......例如，在移動設備上。 –

給vertical-align: top到UL顯示inline-block的，它應該工作

來源

2015-11-13 20:23:19 Iecya

OP不想讓您的答案得分！！MrDevRI應該讓你高興，並接受你的答案是正確的。 –

以我想要的方式對齊列表元素

回答

相關問題