我想更改组件的样式以适应内容,我的组件Plan.vue
:
<template>
<div class="plan">
<div id="planFlex">
<font-awesome-icon icon="fa-solid fa-user fa-xl" />
<font-awesome-icon icon="fa-solid fa-arrow-left fa-xl" />
<h1>Plan</h1>
<font-awesome-icon icon="fa-solid fa-arrow-right fa-xl" />
<font-awesome-icon icon="fa-solid fa-robot fa-xl" />
</div>
</div>
</template>
<script>
export default {
name: "Plan"
};
</script>
<style>
@import "../css/Plan.css";
</style>
我样式表Plan.css
:
#planFlex {
display: flex;
justify-content: space-between;
padding: 5px;
}
.fa-user {
color: white;
}
.fa-robot {
color: white;
}
.fa-arrow-right {
color: white;
position: relative;
padding-left: 80px;
}
.fa-arrow-left {
color: white;
padding-right: 80px;
}
#planFlex h1 {
text-align: center;
margin: 0px;
color: antiquewhite;
}
#planFlex h1:hover {
cursor: pointer;
}
#planFlex h2 {
margin: 0px;
padding-left: 3%;
color: white;
}
我试着添加flex-shrink: 1
和width: fit-content
到我的样式表,但它不适合我,你能告诉我如何让我的设计响应吗?提前感谢。
1条答案
按热度按时间pb3skfrl1#
问题是
.plan
的外部div,默认情况下会显示为块,使您的#planFlex
拉伸到它的边界。如果添加以下内容,您会发现
#planFlex
将只是内容的宽度:在您的具体情况下,您应该考虑删除箭头图标上的80px填充,并让flex为您提供间距。假设您希望图标粘在两侧,而标题位于中间,只需将它们包裹在一些div中,这对我运行您的项目很有用: