我如何将雪佛龙移动到最右边与文本的距离？

Question

怎么才能把按钮/雪佛龙转到最右边呢？

现在的情况：

​

我想让它看起来像：

​

​

我是用苗条的医生的手风琴做的。

任何帮助都是非常感谢的。

<script>
    import { slide } from "svelte/transition";
    export let entry
    let isOpen = false
    const toggle = () => isOpen = !isOpen
</script>
<style>
    button {
        border: none; 
        background: none;
        display:block; 
        color: inherit; 
        font-size: 16px; 
        cursor: pointer; 
        margin: 0; 
        padding-bottom: 0.5em; 
        padding-top: 0.5em;
        padding-left: 0;
    }
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    li {
        font-size: 16px;
        font-weight: 300;
        
    }
    svg { 
        transform: rotate(90deg);
        transition: transform 0.2s ease-in;
        margin-right: 0;   
    }
    
    [aria-expanded=true] svg { transform: rotate(0.75turn); }
</style>
<button on:click={toggle} aria-expanded={isOpen}> {entry[0]}<svg style="tran"  width="20" height="20" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M9 5l7 7-7 7"></path></svg> </button>
{#if isOpen}
<ul transition:slide={{ duration: 300 }}>
    {#each entry[1] as item}
    <li>{item}</li>
    {/each}
</ul>
{/if}

Answer 1

最简单的解决方案是使用flexbox和space-between。

​

.accordion {
  display: flex;
  justify-content: space-between;
}

<div class="accordion">
  text
  <svg width="18" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
  </svg>
</div>

​