显示:行内块最后一个子项宽度100%与其兄弟项不对齐

基础概念

在CSS布局中，行内块元素（inline-block）是一种既具有行内元素的特点（如可以与其他行内元素在同一行显示），又具有块级元素的特点（如可以设置宽度和高度）的元素。当行内块元素的宽度设置为100%时，它会尝试占据其父容器的全部宽度，这可能会导致与其他行内块元素的对齐问题。

类型

行内块元素：如<span>、<img>等，默认情况下是行内元素，但可以通过设置display: inline-block来变为行内块元素。
块级元素：如<div>、<p>等，默认情况下是块级元素，占据整行空间。

应用场景

行内块元素常用于创建水平导航栏、图标列表等布局。

问题原因及解决方法

当行内块元素的最后一个子项宽度设置为100%时，它会占据父容器的全部宽度，导致与其他行内块元素不对齐。这是因为其他行内块元素的宽度是根据内容自动调整的，而最后一个子项的宽度是固定的。

解决方法

使用Flexbox布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        .item {
            width: calc(25% - 10px); /* 根据实际情况调整 */
            margin-right: 10px;
        }
        .item:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

使用Grid布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 根据实际情况调整 */
            gap: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>