我这里有这个设计:
您可以看到 Material 图标与描述有点太接近了。我想我可以通过做这样的事情在两者之间创建一些填充:
.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
,您选择了 .location-secondary
中的第一个 span
元素。
关于css - 如何在 Material 图标和描述之间创建一些空白?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55496925/