将图标与 div 内的文本对齐

Question

使用样式组件来创建各种手风琴 - 确实很难确定样式。除了图标高度（应该与标题“正在发送的货物”）之外，一切都很好，12px 的边距是完美的。我的另一个问题是，当跨度内的文本超过一行时，第一行之后的每一行都向左缩进？

codepen：https://codepen.io/simoncunningham/pen/rNyeBYb

const Accordion = styled.div`
  background-color: #e5e9eb;
  height: 87px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;

  span {
    font-size: 14px;
    line-height: 20px;
    padding-left: 24px;
  }
`;

const AccordionExpanded = styled.div`
  background-color: #e5e9eb;
  height: 174px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;

  span {
    font-size: 14px;
    line-height: 20px;
    padding-left: 24px;
  }
`;

const Title = styled.h3`
font-size: 12px;
letter-spacing: 1px;
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;
`;

const CollapseIcon = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
-webkit-transform: rotate(180deg);
`;

const ExpandableString = ({ attribute, className }: Props) => {
  const [isExpanded, setIsExpanded] = React.useState(false);
  const fullDescription = attribute.readonlyvalue;
  const shortHeading = fullDescription.substring(0, 40) + '...';

  function toggleContent() {
    setIsExpanded(prev => !prev);
  }

  return (
    isExpanded ? <AccordionExpanded className={className}>
      <Title>Goods being sent</Title>
      <span>{fullDescription}</span>
      <CollapseIcon onClick={toggleContent} src={chevron} alt="Collapse content" aria-label="Collapse content" />
    </AccordionExpanded> : <Accordion className={className}>
      <Title>Goods being sent</Title>
      <span>{shortHeading}</span>
      <ExpandIcon onClick={toggleContent} src={chevron} alt="Expand content" aria-label="Expand content" />
    </Accordion>
  );
};

Answer 1

如果你想让icon level和div.title一样，只要把span.icon放在div.title里面就行了。 float:right 将负责其余的工作

对于您的跨度的多行问题。只需将 display: block; 添加到您的内容跨度类。

这是最终结果；

.accordion {
  background-color: #e5e9eb;
  height: 87px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;
}

.accordion span {
    font-size: 14px !important;
    padding-left: 24px;
    display: block;
}

.title {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-left: 24px;
  padding-top: 20px;
  padding-bottom: 0px;
}

.icon {
  height: 40px;
  width: 40px;
  float: right;
  margin-right: 12px;
  background-color: red;
}

<div class="accordion">
  <div class="title">
    <div class="icon"></div>
    Goods being sent
  </div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis risus et diamaaw sollicitudin suscipit non vel justo. Morbi vel enim sit amet erat blandit pellentesque.</span>
</div>