[英]Vue.js page is not centralizing all my contents in the page
開發一個我向后端發出請求的 viu.js 頁面 100% 運行良好,但我試圖在整頁和中心對內容進行樣式化,但我無法將它們全部集中。
我有這個簡單的代碼:
<template>
<div class="container">
<div class="left">
<img src="../assets/GeeksBay-4.jpg" alt="logo" />
</div>
<div class="right">
<nav>
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</nav>
</div>
<div>
<h1>GeekCentric</h1>
</div>
<div class="post-detail">
<form class="submit" @submit.prevent="submit">
<input class="post" placeholder="Type your favourite topic..." v-model="message"/>
</form>
</div>
<div class="postages list-group list-group-flush border-bottom scrollarea">
<div class="list-group-item list-group-item-action py-3 lh-tight"
v-for="message in messages" :key="message"
>
<div class="post-details col-10 mb-1 small">{{ message.message }}</div>
</div>
</div>
</div>
</template>
<script>
import {ref, onMounted} from 'vue';
import Pusher from 'pusher-js';
export default {
name: 'App',
setup() {
const post = ref('');
const messages = ref([]);
const message = ref('');
onMounted(() => {
Pusher.logToConsole = true;
const pusher = new Pusher('068133b23cfaf634458b', {
cluster: 'us3'
});
const channel = pusher.subscribe('chat');
channel.bind('message', data => {
messages.value.push(data);
});
});
const submit = async () => {
await fetch('http://localhost:8000/api/messages', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
post: post.value,
message: message.value
})
})
message.value = '';
post.value = '';
}
return {
post,
messages,
message,
submit
}
}
}
</script>
<style scoped>
.container {
background-color: #330624;
padding: 10px;
text-align: center;
box-sizing: border-box;
}
.left {
float: left;
padding-bottom: 25px;
}
.right {
float: right;
}
h1 {
color: #fdb924;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.submit {
margin-top: 45px;
width: 100%;
}
.post-detail {
margin: 1px;
flex-direction: row;
}
.post-details {
background-color: #330624;
padding: 10px;
box-sizing: border-box;
color: #fff;
font-size: 18px;
border-bottom: 3px solid #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.postages {
padding: 50px;
box-sizing: border-box;
color: rgb(88, 88, 88);
margin: 0 10px;
border-bottom: 3px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-direction: row;
}
.scrollarea {
min-height: 808px;
margin: auto;
}
</style>
也許有些東西我看不到,因為我是 vue.js 的新手,所以我在尋求任何人的幫助,或者可能是因為我將引導程序與一些樣式代碼混合在一起,這有什么意義嗎?
我在您的徽標、頁面標題和導航鏈接周圍設置了一個 header 標記。 讓它們顯示為 flex,而不是浮動側面對象。 然后使用您的right
類對它們進行left
的text-align
。
此外,在 HTML 代碼的 rest 周圍插入了一個節標記,因此可以更輕松地設置和調試代碼的樣式。
稍后,考慮為頁面的每個部分創建組件,以便真正利用 Vue.js 框架。
這應該做的工作:
<template>
<div class="container">
<div class="main-bg">
<header>
<div class="left">
<img src="../assets/GeeksBay-4.jpg" alt="logo" />
</div>
<div class="geek">
<h1>GeekCentric</h1>
</div>
<div class="right">
<nav>
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</nav>
</div>
</header>
<section>
<div class="post-detail">
<form class="submit" @submit.prevent="submit">
<input class="post" placeholder="Type your favourite topic..." v-model="message"/>
</form>
</div>
<div class="postages list-group list-group-flush border-bottom scrollarea">
<div class="list-group-item list-group-item-action py-3 lh-tight"
v-for="message in messages" :key="message"
>
<div class="post-details col-10 mb-1 small">{{ message.message }}</div>
</div>
</div>
</section>
</div>
</div>
</template>
<script>
import {ref, onMounted} from 'vue';
import Pusher from 'pusher-js';
export default {
name: 'App',
setup() {
const post = ref('');
const messages = ref([]);
const message = ref('');
onMounted(() => {
Pusher.logToConsole = true;
const pusher = new Pusher('068133b23cfaf634458b', {
cluster: 'us3'
});
const channel = pusher.subscribe('chat');
channel.bind('message', data => {
messages.value.push(data);
});
});
const submit = async () => {
await fetch('http://localhost:8000/api/messages', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
post: post.value,
message: message.value
})
})
message.value = '';
post.value = '';
}
return {
post,
messages,
message,
submit
}
}
}
</script>
<style scoped>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
margin-bottom: 2vw;
display: flex;
align-items: center;
justify-content: space-between;
}
header div {
width: 33%;
}
.container {
background-color: #330624;
padding: 30px;
text-align: center;
box-sizing: border-box;
}
h1 {
color: #fdb924;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.submit {
}
.post-detail {
}
.post-details {
}
.postages {
}
.scrollarea {
min-height: 808px;
margin: auto;
}
</style>
注意:我取出了一些尚未使用的類,以便更好地測試它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.