[英]Aligning icon to text inside a div
using styled components to create an accordion of sorts - really struggling to nail down the styling.使用样式化的组件来创建各种手风琴 - 真的很难确定样式。 Everything is ok other than the icon height (should be level with the title "Goods being sent") margin-right of 12px is perfect.除了图标高度(应该与标题“正在发送的货物”)之外,一切都很好,12px 的边距是完美的。 Another question I have is that when the text within the span expands over more than one line, then every line following the first is indented to the left?我的另一个问题是,当跨度内的文本扩展超过一行时,第一行之后的每一行都向左缩进?
codepen: https://codepen.io/simoncunningham/pen/rNyeBYb代码笔: 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>
);
};
If you want to icon level to be same as the div.title, just put the span.icon inside to the div.title.如果你想图标级别和 div.title 一样,只要把 span.icon 放到 div.title 里面。 float:right
will take care of the rest float:right
将负责 rest
For the multi-line problem with your span.对于您的跨度的多线问题。 Just add display: block;
只需添加display: block;
to your content span's class.到您的内容范围的 class。
Here is the end result;这是最终结果;
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.