<div> 横向居中-跨浏览器活动

博客主要涉及HTML和JavaScript相关内容,可能围绕这两种技术在浏览器中的应用等信息技术方面展开,但具体细节未详细给出。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template> <!-- 顶部搜索区域 --> <div class="filter-container"> <el-form :inline="true" :model="searchForm"> <!-- 问卷标题搜索 --> <el-form-item label="问卷标题"> <el-input v-model="searchForm.dcWjTitle" placeholder="输入问卷标题" clearable /> </el-form-item> <!-- 被测评人ID搜索 --> <el-form-item label="被测评人ID"> <el-input v-model="searchForm.dcid" placeholder="输入被测评人ID" clearable /> </el-form-item> <!-- 部门选择 --> <el-form-item label="人员部门"> <el-select v-model="searchForm.dcDept" placeholder="选择部门" clearable > <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value" /> </el-select> </el-form-item> <!-- 状态选择 --> <el-form-item label="提交状态"> <el-select v-model="searchForm.state" placeholder="选择状态" clearable > <el-option label="已提交" value="1" /> <el-option label="未提交" value="0" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button> </el-form-item> </el-form> </div> <!-- 数据表格 --> <el-table :data="filteredData"> <!-- 表格列定义 --> </el-table> </template> <script> export default { data() { return { searchForm: { dcWjTitle: '', dcid: '', dcDept: '', state: '' }, rawData: [], // 原始数据 departments: [ // 部门选项 { label: '技术部', value: 'tech' }, { label: '市场部', value: 'market' } ] } }, computed: { // 过滤后的数据 filteredData() { return this.rawData.filter(item => (!this.searchForm.dcWjTitle || item.title.includes(this.searchForm.dcWjTitle)) && (!this.searchForm.dcid || item.dcid === this.searchForm.dcid) && (!this.searchForm.dcDept || item.dept === this.searchForm.dcDept) && (!this.searchForm.state || item.state === this.searchForm.state) ) } }, methods: { // 触发搜索 handleSearch() { this.fetchFilteredData() }, // 从后端获取数据 async fetchFilteredData() { try { const params = { title: this.searchForm.dcWjTitle, dcid: this.searchForm.dcid, dept: this.searchForm.dcDept, state: this.searchForm.state } // 调用后端API(示例) const { data } = await axios.get('/api/questionnaires', { params }) this.rawData = data } catch (error) { console.error('获取数据失败', error) } } } } </script> 帮我优化一下布局,适用于移动端
07-15
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>EDA-Robot</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { max-width: 800px; margin: 0 auto; padding: 20px; text-align: center; } h1 { text-align: center; } .button { display: inline-block; height: 30px; width: 300px; margin-top: 20px; padding: 10px 20px; background-color: deepskyblue; color: #fff; border: none; border-radius: 20px; /* 添加圆角 */ text-decoration: none; line-height: 2; /* 通过调整line-height的值来调整文字的垂直位置 */ text-align: center; /* 文字居中 */ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加立体感 */ transition: all 0.3s ease; /* 添加过渡效果 */ } .button:hover { background-color: skyblue; /* 鼠标悬停时的背景颜色 */ transform: translateY(2px); /* 点击效果 */ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* 添加更多立体感 */ } .search-box { margin-top: 20px; display: inline-block; height: 30px; width: 300px; padding: 5px 10px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 20px; text-align: center; /* 文字居中 */ } .hidden { display: none; /* 初始隐藏 */ } </style> </head> <body> <form action='/connect' method='POST'> <div class='container'> <h1>EDA-Robot设备配置页</h1> <p>本项目基于ESP8266主控开发</p> <input type='text' name='ssid' placeholder='输入WIFI212名称' class='search-box'> <input type='password' name='pass' placeholder='输入WIFI密码' class='search-box'> <input type='uid' name='uid' placeholder='输入bilibili用户ID' class='search-box'> <input type='api' name='api' placeholder='输入心知天气API密钥' class='search-box'> <input type='city' name='city' placeholder='输入城市拼音小写' class='search-box'> <input type='submit' style="height: 50px;width: 320px" class='button' value="保存"> <a href="https://lceda.cn/"> <table class="container button" style="height: 200px"> <tr> <th>设备名称:</th> <td>EDA-Robot</td> </tr> <tr> <th>内存大小:</th> <td>4MB</td> </tr> <tr> <th>控制台版本:</th> <td>V1.0</td> </tr> <tr> <th>作者:</th> <td> 臣除君</td> </tr> </table> </a> </div> </form> </body> </html>为什么这里的 <tr> <th>设备名称:</th> <td>EDA-Robot</td> </tr>是横向排版的?
最新发布
08-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值