Как я могу изменить ширину Vue Router-Link? - PullRequest
Новая
       10

Как я могу изменить ширину Vue Router-Link?

1 голос
/ 11 марта 2019

У меня есть следующий код (<strong>IN VUE.JS</strong>): 

<template>
    <router-link 
        :to="{ name: 'page', params: { id: 123 } }" 
        id="router-link">
             Link
    </router-link>
</template>

<script>
    ⋮
</script>

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

Проблема:
Даже при том, что я установил ширину в 100 пикселей, router-link не изменит свой размер ширины.

Может кто-нибудь, пожалуйста, помогите мне понять, почему это не работает и есть ли возможное решение проблемы?

1 Ответ

2 голосов
/ 11 марта 2019

По умолчанию <router-link> отображает <a>, который обычно равен display:inline, который игнорирует ширину. Добавьте display:inline-block к вашему стилю, чтобы исправить проблему. 

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

демо

...