我目前正在做一个项目，我被一个样式问题卡住了。我使用react.js与样式组件。我在列表中有不同的发票卡，每张发票卡的内容都依赖于数据，这些数据来自JSON。我的问题是间距，因为卡片元素的内容可以不同，我不能给他们分配一个固定的边距;如果我这么做了，我就会得到这样的链接到问题的图像，而不是它应该是这样的。正如您在设计中看到的，它们应该处于同一水平。当我给id、name和date添加min-width时，名字和价格之间又出现了另一个间距问题。这是我在这个组件中的代码。
import React from "react";
import styled from "styled-components";
import { ReactComponent as RightIcon } from "../../../images/icon-arrow-right.svg";
import data from "../data/invoices.json";
const InvoiceCardComponent = styled.li`
font-size: 1.2rem;
line-height: 1.5rem;
padding: 1.6rem 3.2rem;
box-shadow: 0px 10px 10px -10px rgba(72, 84, 159, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 8px;
background-color: ${({ theme }) => theme.colors.white};
&:not(:last-child) {
margin-bottom: 1.6rem;
}
`;
const Id = styled.p`
font-weight: 700;
margin-right: 4.3rem;
`;
const HashTag = styled.span`
color: ${({ theme }) => theme.colors.shipCove};
`;
const Date = styled.p`
color: ${({ theme }) => theme.colors.baliHai};
margin-right: 4.5rem;
`;
const Time = styled.time``;
const Name = styled.p`
color: ${({ theme }) => theme.colors.baliHai};
`;
const Price = styled.p`
font-weight: 700;
font-size: 1.6rem;
line-height: 2.4rem;
margin-right: 4rem;
`;
const Status = styled.p`
margin-right: 2rem;
font-weight: 700;
color: ${({ theme }) => theme.colors.success};
text-transform: capitalize;
display: flex;
align-items: center;
background-color: ${({ theme }) => theme.colors.lightSuccess};
min-width: 10.4rem;
padding: 1.3rem 0;
display: inline-flex;
justify-content: center;
border-radius: 6px;
`;
const UserInfo = styled.div`
display: flex;
`;
const PaymentInfo = styled.div`
display: flex;
align-items: center;
`;
const StatusIcon = styled.span`
display: inline-block;
border-radius: 100%;
width: 8px;
height: 8px;
background-color: ${({ theme }) => theme.colors.success};
margin-right: 8px;
`;
const InvoiceCard = () => {
const renderInvoices = data.map((invoice) => {
const date = new window.Date(invoice.paymentDue);
const month = date.toLocaleString("en-US", { month: "short" });
const day = date.getDate();
const year = date.getFullYear();
const formattedTotal = invoice.total.toLocaleString("en-US", {
currency: "GBP",
style: "currency",
});
return (
<InvoiceCardComponent key={invoice.id}>
<UserInfo>
<Id>
<HashTag>#</HashTag>
{invoice.id}
</Id>
<Date>
<Time dateTime={invoice.paymentDue}>
Due {day} {month} {year}
</Time>
</Date>
<Name>{invoice.clientName}</Name>
</UserInfo>
<PaymentInfo>
<Price>{formattedTotal}</Price>
<Status>
<StatusIcon></StatusIcon>
{invoice.status}
</Status>
<RightIcon />
</PaymentInfo>
</InvoiceCardComponent>
);
});
return <React.Fragment>{renderInvoices}</React.Fragment>;
};
export default InvoiceCard;
我将感激任何帮助。谢谢你！
在这种情况下，您需要显式地为每行中的每列设置width。然后在每一列中，您可以根据需要进行任何样式(text-align,flex与justify-content等)，因此同一列中的所有单元格都具有相同的样式。
.row-wrap {
display: flex;
}
.col-wrap {
background: red;
margin: 2px;
}
.col1 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
text-align: left;
}
.col2 {
width: 300px;
text-align: center;
}
.col3 {
width: 150px;
text-align: left;
}
.col4 {
width: 400px;
text-align: right;
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="row-wrap">
<div class="col-wrap col1">text</div>
<div class="col-wrap col2">text</div>
<div class="col-wrap col3">text</div>
<div class="col-wrap col4">text</div>
</div>
<div class="row-wrap">
<div class="col-wrap col1">
longgggggggggggggggggggggggggggggggggggggg text
</div>
<div class="col-wrap col2">text</div>
<div class="col-wrap col3">text</div>
<div class="col-wrap col4">text</div>
</div>
</body>
</html>