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

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">

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

    <i class="icon-basket search-event-icon-right-size"></i>

</div>

这将使字幕文本与图标分开，并让您更好地控制它。然后在你的css中添加这个类：

.search-event-block-subtitle label {

    width: calc(100% - 84px);

    display: inline-block;

}

并将“search-event-icon-right-size”类更新为：

.search-event-icon-right-size {

    font-size: 21px;

    color: #1B4593;

    width: 60px;

    display: inline-block;

    vertical-align: top;

}

search-event-block-subtitle 标签中的宽度计算是 100% - 84px，因为您应该减去图标的宽度和 search-event-block-subtitle 标签填充。您应该将这些数字调整为您要使用的图标的实际大小。

我希望这有帮助。