css - 如何在材质图标和描述之间创建一些空白?
问题描述
我这里有这个设计:
你可以看到材料图标有点太接近描述了。我认为我可以通过执行以下操作在两者之间创建一些填充:
.location-secondary-info span:first-child {
padding-right: 5px;
}
那是无效的。
这是组件代码:
renderLocation() {
const filteredLocations = this.props.locations.filter(location => {
return !location.name.match(/[A-Z0-9]+$/);
});
return filteredLocations.map(location => {
if (location.airport_code) {
return (
<div key={location.id}>
<div className="location">
<h1>
{location.name} ({location.airport_code})
</h1>
<div className="location-secondary-info">
<span>
<i className="material-icons">airplanemode_active</i>
{location.description}
</span>
</div>
</div>
</div>
);
} else {
return (
<div key={location.id}>
<div className="location">
<h1>{location.name}</h1>
<div className="location-secondary-info">
<span>
<i className="material-icons">location_city</i>
{location.description}
</span>
</div>
</div>
</div>
);
}
});
}
解决方案
您应该选择i
跨度内的元素,因此:
.location-secondary-info span i {
padding-right: 5px;
}
随着span:first-child
您选择span
内部的第一个元素.location-secondary
。
推荐阅读
- asp.net-core - Apache ignite 在 ubuntu 上一段时间后停止工作
- java - 无法在android studio中更改系统时间
- c# - .NET 5:X509Certificate.GetNameInfo 大写 unicode 转义字符
- python - Python 等价于 MATLAB 的 sortrows 函数
- authentication - 如何在 JavaServer Faces 中进行安全过滤?
- git - 如何获取我强制推送的远程分支上存在的 readme.md 文件
- python - 如何在Python中使用两个标签自动计算两个不同日期之间的时间?
- sql - 按目标子句合并不更新所需的列
- javascript - 加载 iframe 并为就绪状态添加侦听器完成
- maven - 使用 Maven 运行集成测试 - 构建成功但测试运行 = 0