当文本和图标在同一行上对齐时，自定义卡片组件不响应

Question

我制作了自己的自定义卡片组件来从头开始学习 CSS 和 HTML。

这是我的 HTML 代码：

<div class="col-12">

    <div>

        <div class="search-event-block">

            <div class="search-event-icon-left">

                <i class="icon-horse search-event-icon-left-size"></i>

            </div>

            <div class="search-event-block-inner">

                <div class="search-event-block-title">

                    <label class="search-event-block-padding ">Title</label>

                </div>

                <div class="search-event-block-subtitle">

                    <label class="search-event-block-padding">Subtitle<i class="icon-basket search-event-icon-right-size"></i></label>

                </div>

                <div class="search-event-block-links ">

                    <label class="search-event-block-padding">Go block | Delete block</label>

                </div>

            </div>

        </div>

    </div>

</div>

这是我为卡片组件设置 css 样式的代码：

.search-event-block {

        height: 87px;

        margin-top: 10px;

        background-color: #fff;        

    }

       .search-event-block-inner {

        position: relative;

        top: -87px;

        left: 74px;

        width: calc(100% - 74px);

    }

    .search-event-block-inner {

        position: relative;

        top: -87px;

        left: 74px;

        width: calc(100% - 74px);

    }

    .search-event-block-title {

        font-size: 1.1rem;

        font-weight: bold;

        margin-top: 11px;

    }

    .search-event-block-subtitle {

        font-size: 0.8rem;

    }

    .search-event-block-links {

        color: #2E85DE;

        cursor: pointer;

        padding-top: 6px;

        font-size: 0.8rem;

    }

    .search-event-icon-left {

        background-color: #F2F3F7;

        height: 87px;

        width: 74px;

        padding-top: 18px;

        padding-left: 13px;

    }

问题出在课堂上：search-event-block-subtitle. 我希望字幕和图标在同一行。图标必须与卡片的末端对齐。这工作正常，但是当我调整窗口大小时，图标位于副标题下方。当屏幕变小时，我希望图标仍然与副标题保持在同一行。

Answer 1

第一步是将您的字幕层更新为：<div class="search-event-block-subtitle">&nbsp; &nbsp; <label class="search-event-block-padding">Subtitle</label>&nbsp; &nbsp; <i class="icon-basket search-event-icon-right-size"></i></div>这将使字幕文本与图标分开，并让您更好地控制它。然后在你的css中添加这个类：.search-event-block-subtitle label {&nbsp; &nbsp; width: calc(100% - 84px);&nbsp; &nbsp; display: inline-block;}并将“search-event-icon-right-size”类更新为：.search-event-icon-right-size {&nbsp; &nbsp; font-size: 21px;&nbsp; &nbsp; color: #1B4593;&nbsp; &nbsp; width: 60px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; vertical-align: top;}search-event-block-subtitle 标签中的宽度计算是 100% - 84px，因为您应该减去图标的宽度和 search-event-block-subtitle 标签填充。您应该将这些数字调整为您要使用的图标的实际大小。我希望这有帮助。