如何正确对齐 Vue.js 项目导航栏中的链接？答案

【问题标题】：How do I right align links in the navigation bar of my Vue.js project?如何正确对齐 Vue.js 项目导航栏中的链接？
【发布时间】：2017-07-27 02:44:27
【问题描述】：

我想在导航栏中右对齐我的产品和支持链接。您如何整体对齐 vue.js 项目导航栏中的链接？

This is how it looks now

这是代码。

<md-whiteframe class = "main-toolbar  ">

  <md-theme name = "teal">

      <md-toolbar  class = "">

     <router-link class = "nav-link " :to = " { name: 'levi' }" style = "color:white; text-decoration: none; ">levi</router-link>

          <router-link id = "nav"class = "nav-link" :to = "{ name: 'Product' }" style = "color:white; text-decoration: none;">
        Product
    </router-link> 

     <router-link id = "nav" class = "nav-link" :to = "{ name: 'Support' }" style = "color:white; text-decoration: none;">
        Support
    </router-link>


      </md-toolbar>

  </md-theme>

   </md-whiteframe>

【问题讨论】：

迄今为止，您已经提出了 21 个问题，但从未接受过任何一个问题的答案。您应该参与该网站！当人们以赞成和接受的方式回答您的问题时，向他们提供反馈。
@BertEvans 很抱歉没有足够的参与。我会增加我对社区的贡献。

标签： vue.js css vue.js vue-material

【解决方案1】：

将flex:1 添加到levi 链接的样式中。

<md-toolbar  class = "">
  <router-link class = "nav-link " :to = " { name: 'levi' }" style = "color:white; text-decoration: none; flex: 1">levi</router-link>
  <router-link id = "nav"class = "nav-link" :to = "{ name: 'Product' }" style = "color:white; text-decoration: none;">
    Product
  </router-link> 
  <router-link id = "nav" class = "nav-link" :to = "{ name: 'Support' }" style = "color:white; text-decoration: none;">
    Support
  </router-link>
</md-toolbar>

更新fiddle。

【讨论】：