我正在尝试将 svg 图标放在常见问题解答按钮中。我可以只使用弹性框来对齐按钮内的图标吗?
这是我的一些CSS:
.section-custom{
margin: 50px;
display: flex;
flex-direction: column;
align-items: center; /*cross axis for column */
}
.div-faq{
padding-top: 40px;
padding-bottom: 40px;
}
.div-faq-list-item{
display: flex;
align-items: center; /*cross axis for row */
}
.faq-btn{
background-color: #333;
font-size: 25px;
border: 0;
width: 800px;
padding: 22px;
margin: 4px;
text-align: left;
}
这是 HTML:
<section class="section-custom">
<h1>Frequently Asked Questions</h1>
<ul class="div-faq">
<li class="div-faq-list-item">
<button class="faq-btn">What is Netflix?
</button>
<svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"><rect width="100%" height="100%" fill="#333333"></rect>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
</svg>
</li>
<li class="div-faq-list-item"><button class="faq-btn">How much does Netflix cost?</button>
</li>
<li class="div-faq-list-item"><button class="faq-btn">Where can I watch?</button></li>
<li><button class="faq-btn">How do i cancel?</button></li>
<li><button class="faq-btn">What can I watch on Netflix?</button></li>
<li><button class="faq-btn">is Netflix good for kids?</button></li>
</ul>
</section>
从 SVG 图标中删除填充属性,并使按钮和 SVG 背景透明。In-display flex 你可以通过 justify-content:space-between 来实现这个结果;
ul{
list-style:none;
display:flex;
flex-direction:column;
gap:0.6rem;
background-color:black;
padding:1rem;
}
ul li{
display:flex;
padding:1rem;
background-color:#2e2e2e;
color:white;
justify-content:space-between;
align-items:center
}
li svg{
fill:transparent;
}
button{
font-size:1.6rem;
background-color:transparent;
color:white;
border:none;
}
<ul class="div-faq">
<li class="div-faq-list-item">
<button class="faq-btn">What is Netflix?</button>
<svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"><rect width="100%" height="100%" ></rect>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
</svg>
</li>
<li class="div-faq-list-item">
<button>How much does Netflix cost?</button>
<svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"><rect width="100%" height="100%" ></rect>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
</svg>
</li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句