html - 图标不会显示在与 div 内的文本相同的高度
问题描述
我真的很难将我的图标 ( ) 定位在与我的(h3)CollapseIcon
相同的高度,如下所示:<Title>
如您所见,图标位于文本下方,而不是在同一级别(水平)。代码如下所示:
const Accordion = styled.div`
background-color: #e5e9eb;
height: 87px;
max-width: 612px;
border-radius: 2px;
border: 1px solid #27282a;
margin-bottom: 48px;
span {
font-size: ${themeProp("FONT_SIZE_SMALL")};
line-height: 1.25rem;
padding-left: 24px;
padding-right: 24px;
display: block;
}
`;
const Title = styled.h3`
font-size: 0.75rem;
letter-spacing: 0.063rem;
text-transform: uppercase;
padding-left: 24px;
padding-top: 20px;
padding-bottom: 0px;
`;
const ExpandIcon = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
`;
<Accordion className={className}>
<Title>
Goods being sent
<ExpandIcon
role="button"
tabIndex={0}
onKeyDown={toggleContent}
onClick={toggleContent}
src={chevron}
/>
</Title>
<span>{shortHeading}</span>
</Accordion>
解决方案
推荐阅读
- scala - Akka Stream, Tcp().bind, 客户端关闭套接字时的处理
- assembly - 在 MIPS 中加载和存储值的问题
- c# - ASP.NET C# JSON 反序列化嵌套数组:无法对空引用执行运行时绑定
- java - 使用 JAXB 的问题,我的 POJO 字段没有被映射
- c++ - 如何确定强类型的基类型是否为 std::array
仅使用标准库 - pandas - 使用 Pandas 获取最右边的数据
- javascript - 无法根据正则表达式拆分字符串
- yocto - 在繁忙的构建节点上通过 NFS 托管 Yocto SSTATE_MIRROR - 一个坏主意?
- sas - 导出整个 SAS EG 会话的日志
- c# - 带有 WPF 数据网格视图和行详细信息的异步等待。应用程序在继续之前不等待任务的结果