如何更改 Vue 路由器链接的宽度？

Question

我有以下代码（IN VUE.JS）：

<template>
    <router-link
        id="router-link"
     >
    </router-link>
</template>

<script>
    ?
</script>

<style scoped>
    #router-link{
        border: 2px solid black;
        width: 100px;
    }
</style>

问题：
即使我将宽度设置为 100px，router-link也不会改变它的宽度大小。

有人可以帮助我理解为什么这不起作用以及是否有可能的解决方案？

Answer 1

默认情况下，<router-link>渲染一个<a>，通常是display:inline，忽略宽度。添加display:inline-block到您的样式以解决问题。

#router-link {
  display: inline-block; 
  width: 100px;
}

演示