61,115
社区成员
发帖
与我相关
我的任务
分享为什么我的组件不能并排显示？
为什么我已经加了display:inline这条语句，我的组件还是不能并排显示？
这是我想要实现的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
nav{
background-color: lightgray; height: 40px;
}
p{display:inline;}
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<nav>
<router-link to="/" style="margin-left:50px">page1</router-link>
<router-link to="/page" style="margin-left:120px">page2</router-link>
</nav>
<router-view></router-view>
<router-view name="main"></router-view>
</div>
<script>
var sidebar1 = {
template: `
<div><p>左侧导航栏一</p></div>
`
}
var com1 = {
template: `
<div><p>主内容一</p></div>
`
}
var sidebar2 = {
template: `
<div><p>左侧导航栏二</p></div>
`
}
var com2 = {
template: `
<div><p>主内容二</p></div>
`
}
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: sidebar1,
main: com1
}
}, {
path: '/page',
components: {
default: sidebar2,
main: com2
}
}
]
})
new Vue({
el: '#app',
router
})
</script>
</body>
</html>这是我想要实现的效果
...全文
请发表友善的回复…
发表回复
我是混子我怕谁 2020-11-28
- 打赏
- 举报
display:inline你的适用对象是p标签，而你想实现的功能外面套了一个div标签，我用代码给你展示一下吧：
<!-- 这是你的代码结构 -->
<div><p></p></div>
<div><p></p></div>
