开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用HTML并排放置两个投票项目？

要在HTML中并排放置两个投票项目，可以使用HTML和CSS来实现。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票项目</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="vote-container">
        <div class="vote-item">
            <h3>投票项目1</h3>
            <button>投票</button>
        </div>
        <div class="vote-item">
            <h3>投票项目2</h3>
            <button>投票</button>
        </div>
    </div>
</body>
</html>

CSS部分（styles.css）

body {
    font-family: Arial, sans-serif;
}

.vote-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
}

.vote-item {
    text-align: center;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    width: 30%;
}

解释

HTML部分：
- <!DOCTYPE html>：声明文档类型为HTML5。
- <html lang="en">：设置网页语言为英语。
- <head>：包含元数据和外部资源链接。
- <meta charset="UTF-8">：设置字符编码为UTF-8。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使页面适应不同设备。
- <title>：设置网页标题。
- <link rel="stylesheet" href="styles.css">：链接外部CSS文件。
- <body>：包含网页的主体内容。
- <div class="vote-container">：包含两个投票项目的容器。
- <div class="vote-item">：每个投票项目的容器。
- <h3>：投票项目的标题。
- <button>：投票按钮。

CSS部分：
- body：设置字体和背景。
- .vote-container：使用display: flex来并排放置子元素，并使用justify-content: space-around和align-items: center来居中对齐。
- .vote-item：设置每个投票项目的样式，包括边框、内边距和圆角。

应用场景

这种布局适用于需要在网页上并排放置多个投票项目的场景，例如在线调查、用户投票活动等。

参考链接

通过这种方式，你可以轻松地在网页上并排放置多个投票项目，并且可以根据需要进一步自定义样式和功能。

相关搜索:如何使用html & css并排放置两个选择属性(格式不同)如何并排放置两个输入字段如何并排放置两个下拉列表？如何并排放置两个锚点如何并排放置两个单选列如何在html页中并排放置元素将两个PHP生成的HTML表并排放置无法使用css/html并排放置图像和文本如何在html中并排放置2张图片？将两个浮动div并排放置时未对齐(HTML)如何并排放置两个或多个ASCII图像？如何放置由边框包围的两个并排元素？我想创建两个计算器并排放置与html 如何在html中并排放置四个图标？如何在matplotlib上并排放置两个饼图如何在列中并排放置两个select结果？如何在doxygen主页中并排放置两个图像如何在react中并排放置两个输入字段如何并排放置两个跨度，然后在其上放置一个跨度如何放置两个div并排当拉伸到完整的大小？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

初识AvalonDock

前些时间由于工作原因接触了AvalonDock，从中受益匪浅，不敢独享，在此与大家共勉。

01

前端测试题:有关于下面盒模型，说法错误的是？

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

02

掌握这4 个关键的 CSS 属性，你才算入门 CSS

英文 | https://javascript.plainenglish.io/4-key-css-properties-explained-in-4-minutes-9567d1b5af86

03

盒模型和box-sizing

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

02

前端课程——浮动

定位的基本思想很简单，它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。

03

First Django App！

上篇笔记从零创建了一个django项目，一个项目肯定是由多个模块组成的，比方说一个电商项目，包括支付模块，商品展示模块，商家用户聊天模块等等，这些模块便可称之为一个应用。

01

基于内容热度的推荐

眼动技术可以用于研究广告注意机制[3]，其研究结果表明我们以特定的模式来浏览网页、手机屏幕[4]，进而产生点击等进一步转化行为。其中的"F"模式常被人提及和关注，但在这种模式下如果某些关键内容刚好被用户跳过，则对于用户和内容提供者而言都是负向收益[5]。

02

学生环境保护绿色家园 WEB静态网页作业模板大学生环境保护网页代码 dreamweaver网页设计作业制作 dw个人网页作业成品

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研

02

Jump Start Bootstrap 第1章

Bootstrap是一个前端框架，可以帮助开发者启动网页开发的过程；从后端转前端的(Java、PHP等)开发者可能很难把握CSS和JavaScript；但是，使用Bootstrap,他们只要专注HTML，把棘手的CSS和JavaScript交给Bootstrap。

04

Adobe Acrobat Pro DC-Mac上的PDF编辑器

DC Acrobat（Adobe Acrobat XI Pro ex）是世界上最佳桌面PDF解决方案的完全重新构想的版本。它包括一个移动应用程序，因此您可以在任何设备上填写，签名和共享PDF文件。借助Document Cloud服务，您可以从任何地方创建，导出，编辑和跟踪PDF文件，并保持与所有设备上的最新文件的连接。

04

程序设计建议

不仅需要关心一般情况下的信息展示，还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候，可以在空白区域放置一条帮助信息告诉用户如何开始。默认的输入按钮可能不适合某些情景，文字链接有时候看起来又太含蓄。需要注意的是，把链接做成Button样式的时候，它们就应该有button的表现形式。比如，在点击button的时候它们应该会出现被“压”过的样子。这不仅仅是纯粹的视觉变化。仅展示用户需要的、而不是所有可用的功能，从而保持用户界面的整洁清爽。在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件，因为用户不是在任何情况下都需要它们。并不是所有的控件都拥有相同的重要性。例如创建一个新的条目，页面中会有“创建”“取消”两个button. 这里的“创建”就要更加重要些，因为这是大多数情况下用户即将要做的事情。极少的情况下用户才会去点击取消。虽然这两个控件并排放置，但是不要给予相同的重视程度。为了将注意力引导到“创建”上，我们可以尝试使用不用的风格或样式。一种方式是将“创建”设计成button样式，“取消”设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色，并使button略有凸起的效果。这样便于抓住用户的目光。

02

14个碳排放数据库汇总（附链接）

1. 中国碳核算数据库（China Emission Accounts and Datasets, CEADs）

02

WordPress SQLite Docker 镜像封装细节

为了让大家用的放心，同时解答 GitHub 社区中的疑问。这篇文章聊聊上一篇文章的 Docker 容器封装细节。

01

日本将核污染黑锅扣我们头上,"二鬼子"蜂拥而上！

从日本决定将2011年福岛核电站泄露核污染水直排海洋开始，对日本劣根性深度了解的我，就知道日本人洗白自己的方法，一定是把黑锅扣我们头上。

01

本周最新 10 款小程序，壁纸、表情包，都是你喜欢的 | 晓榜 #19

想对抗人生的虚无？除了它之外，本期「知晓程序」还精心挑选了一周最新的 10 款小程序，让你的生活绝不无聊。

01

七日Python之路--第三天(之初试Django 2-2)

接上文。前面（1）（2）部分已经实现浏览器访问工程项目，并且能后台管理新创建的app。

01

Dapr 助力应用架构的可持续性

在探讨应用程序的碳足迹时，我们通常应该考虑两个角度。运行它使用了多少能量（即内核数量、执行时间、硬件效率等）以及产生多少能量对环境产生了影响，这称为碳强度，取决于位置、时间和数据中心使用的能源类型（天然气、煤炭、风能等）。2016 年的一项研究证明，大约 55% 的消耗能源取决于计算系统，其余 45% 用于支持计算（冷却、UPS 等）。

02

django 1.8 官方文档翻译： 1-2-3 编写你的第一个Django应用，第3部分

本教程上接教程第2部分。我们将继续开发 Web-poll 应用并且专注在创建公共界面 – “视图（views ）”。

05

Dota2参议院

Dota2的世界里有两个阵营：Radiant天辉和Dire夜魇 Dota2参议院由来自两派的参议员组成。现在参议院希望对一个Dota2游戏里的改变作出决定。他们以一个基于轮转过程的投票进行。在每一轮中，每一位参议员都可以行使两项权利中的一项：

03

外链建设：锚文本要用关键词

锚文本要用关键词，尽管你每天都使用锚文本，你可能没有意识到这一点。锚文本是超链接中看到的可点击文本，向网站用户和搜索引擎发送信号，如果使用得当，它们允许你从其它网站获取可靠信息将你链接到不同的网页。

03

多端排版杂谈

本文主要讲述了Web排版技术的发展历史，从最初的表格布局到最新的网格布局，以及Android端排版技术的种类和差异，探讨了各种排版技术的优点和弊端，并展望了未来排版技术的发展方向。

07

总投资130亿元！在建两座火电厂加速推进，富县将彻底爆发！

2020年，我国火力发电量高达47095.9亿千瓦时，占全国电力的比例为70.5%。虽然我国在大力提高风电、光伏的装机量，实现多元化的能源发电。在现有技术水平下，可再生能源发电的不确定性及其对于电网所带来的冲击，也将会给电力系统的稳定运行带来较大冲击。装机量逐渐上升，产生的电能却有限，所以我国目前主要是火电发电。

02

基于 HTML5 WebGL 的低碳工业园区监控系统

前言低碳工业园区的建设与推广是我国推进工业低碳转型的重要举措，低碳工业园区能源与碳排放管控平台是低碳工业园区建设的关键环节。如何对园区内的企业的能源量进行采集、计量、碳排放核算，如何对能源消耗和碳排

07

使用锁存器做一个寄存器和内存

当我们打游戏的时候如果停电或者电源不小心被拔掉，那么之前做的一切工作将丢失。损失数据的原因是因为电脑是用的： ”随机存取存储器“，简称“ROM”。他只能在有电的时候存储东西；另一种存储叫做持久存储，电源关闭时数据也不会丢失。

02

如何利用锁存器做一个寄存器和内存？

当我们打游戏的时候如果停电或者电源不小心被拔掉，那么之前做的一切工作将丢失。损失数据的原因是因为电脑是用的： ”随机存取存储器“，简称“ROM”。他只能在有电的时候存储东西；另一种存储叫做持久存储，电源关闭时数据也不会丢失。

02

【Python全栈100天学习笔记】Day43 Django静态资源与Ajax请求

基于前面的知识，我们已经可以使用Django框架来完成Web应用的开发了。接下来我们就尝试实现一个投票应用，具体的需求是用户进入应用首先查看到“学科介绍”页面，该页面显示了一个学校所开设的所有学科；通过点击某个学科，可以进入“老师介绍”页面，该页面展示了该学科所有老师的详细情况，可以在该页面上给老师点击“好评”或“差评”；如果用户没有登录，在投票时会先跳转到“登录页”要求用户登录，登录成功才能投票；对于未注册的用户，可以在“登录页”点击“新用户注册”进入“注册页”完成用户注册操作，注册成功后会跳转到“登录页”，注册失败会获得相应的提示信息。

02

港科大&MSRA新研究：关于图像到图像转换，Finetuning is all you need

选自Medium 作者：Dariusz Gross 机器之心编译机器之心编辑部在自然语言处理领域，网络微调已经取得了许多进展，现在这一思想延展到了图像到图像转换的领域。许多内容制作项目需要将简单的草图转换为逼真的图片，这就涉及图像到图像的转换（image-to-image translation），它使用深度生成模型学习给定输入的自然图片的条件分布。图像到图像转换的基本概念是利用预训练的神经网络来捕捉自然图片流形（manifold）。图像转换类似于遍历流形并定位可行的输入语义点。系统使用许多图

03

[教程] 使用 Embark 开发投票 DApp

前面我们基于Embark Demo[1] 介绍了 Embark 框架，今天使用 Embark 来实实在在开发一个 DApp：从零开发开发一个投票DApp。

01

数学建模：绘图经验总结

B站Link：https://www.bilibili.com/video/BV1jg411Z7di

03

【数学建模绘图系列教程】：一、图表类型和工具选择

B站Link：https://www.bilibili.com/video/BV1jg411Z7di

03

PHP 投票功能

双方观点对抗，各持自己的意见的时候，分输赢，这个时候就出现了投票功能来分上下。用户可以选择支持代表自己观点的一方进行投票，本文以红蓝双方投票为例，通过前后台交互，直观展示红蓝双方投票数和所占比例.

03

【LLM系列之BLOOM】BLOOM: A 176B-Parameter Open-Access Multilingual Language Model

预训练语言模型已经成为了现代自然语言处理pipeline中的基石，因为其在少量的标注数据上产生更好的结果。随着ELMo、ULMFiT、GPT和BERT的开发，使用预训练模型在下游任务上微调的范式被广泛使用。随后发现预训练语言模型在没有任何额外训练的情况下任务能执行有用的任务，进一步证明了其实用性。此外，根据经验观察，语言模型的性能随着模型的增大而增加(有时是可预测的，有时是突然的)，这也导致了模型规模越来越多的趋势。抛开环境的问题，训练大语言模型(LLM)的代价仅有资源丰富的组织可以负担的起。此外，直至最终，大多数LLM都没有公开发布。因此，大多数的研究社区都被排除在LLM的开发之外。这在不公开发布导致的具体后果：例如，大多数LLM主要是在英文文本上训练的。

03

Django快速入门——投票程序(4，6)表单&界面、风格

我们更新一下在上一个教程中编写的投票详细页面的模板 ("polls/detail.html") ，让它包含一个 HTML <form> 元素(即表单)

02

django 1.8 官方文档翻译： 1-2-4 编写你的第一个Django应用，第4部分

本教程上接教程第3部分。我们将继续开发 Web-poll 应用并且关注在处理简单的窗体和优化我们的代码。

01

PHP结合Redis+MySQL实现冷热数据交换应用案例详解

本文实例讲述了PHP结合Redis+MySQL实现冷热数据交换应用案例。分享给大家供大家参考，具体如下：

05

OpenTelemetry Collector反模式

OpenTelemetry Collector 是我最喜欢的 OpenTelemetry (OTel) 组件之一。它是一个灵活且强大的数据管道，允许您从一个或多个来源摄取 OTel 数据，对其进行转换（包括批处理、过滤和屏蔽），并将其导出到一个或多个可观测后端进行分析。它与供应商无关。它具有可扩展性，这意味着您可以为其创建自己的自定义组件。有什么不喜欢呢？不幸的是，就像许多现有的工具一样，它也很容易养成一些坏习惯。

01

HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍网络时代已经到来。现在对人们来说，每天上网冲浪已经成为一种最为常见的行为。在网页浏览器中输入一段文本地址，就像http://www.codeproject.com，等待一下，网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和链接组成的。除去内容上的差异，不同网站的网页也具有不同的外观和感受，以实现在网络上建立自己的身份品牌的目的。如果你也曾想要了解你屏幕上的这些网页是如何被创建出并以各式各样的方式渲染的，那么这里正是你可以了解到这些知识的地方。让我们一起走进在浏览器中创建了这么多网页的两项核

06

环保政策大退步！欧洲电动汽车产业「输惨了」？

继续电气改革or“退回”燃油舒适圈，一道摆在欧洲车企面前的选择题。‍ 作者 | 来自镁客星球的家衡就在本周，一则名为“德国取消2035年碳中和目标”的新闻登上社交媒体头条。据报道，受俄乌冲突的影响，欧盟国家面临前所未有的能源困境，因此德国开始在环保政策上动摇，燃煤和燃油发电机组将重返德国市场。消息一出，多只新能源概念股票“闻讯而跌”。尽管后续报道称该新闻系“误读”，但欧洲多国在当下面临严重的能源危机却是不争的事实。与此同时，作为欧洲新能源战略的重要一环，欧洲电动汽车产业在内部悄然出现裂痕。继St

01

万字总结 CSS 布局

本文总结了主流的几种 CSS 的布局方法，无论你是一个想要学习 CSS 布局的新手，还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者，这篇指南都能帮你全面了解如今CSS布局发展的现状。

02

ECCV2020 | HoughNet：将投票机制引入自下而上目标检测，整合局部和全局信息

论文地址：https://arxiv.org/pdf/2007.02355.pdf

02

【面试题解】CSS布局，定位布局，浮动布局，BFC,IFC,FFC,GFC

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

03

ECCV2020 | HoughNet：将投票机制引入自下而上目标检测，整合局部和全局信息

论文地址：https://arxiv.org/pdf/2007.02355.pdf

02

[转自blueidea]像table一样布局div Ⅰ

翻译自：Equal height boxes with CSS 原文：http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。但是你又不喜欢用

07

新冠疫情在阻止全球变暖，让地球自愈？你可拉倒吧！

内容概要：受新冠疫情影响，经济环境急剧收缩，有机构预测全球今年碳排放将达到历史最高水平，远超二战后，和 08 年金融危机，却仍然不能阻止全球变暖的趋势。

04

区块链将影响的19个行业

翻译/校对: Mika 本文为 CDA 数据分析师原创作品，转载需授权观看更多国外公开课，点击"阅读原文" 区块链是未来最有发展潜力的新技术之一，那么它究竟是什么? 中英双字视频如下：针对不方便打

BitMart投票上币，现已火爆开启

BitMart币市作为一家面向全球用户的数字资产综合交易平台，旨在为用户提供币币交易，期货合约交易，场外交易以及全网交易等服务。同时，BitMart币市也在打造一个孵化器平台，为传统商业提供技术、金融和市场等解决方案，帮助其实现数字资产化。

02

#云开发高阶实战任务总结# 投票系统的解析与设计

云开发活动详情：https://cloudbase.net/community/activities/db9f2d6c5eefa7d20034247749f1879c.html

03

php与dreamweaver基础教程,Dreamweaver基础教程基础技巧全面接触

如何更快更方便得对内容进行组织，是每个朋友都想了解的，下面这几个技巧也许你知道，也许不知道，但重要的是通过不断的运用，你会发现它的优越性的。

02

【秒杀系统】零基础上手秒杀系统（三）：抢购接口隐藏 + 单用户限制频率

本文是秒杀系统的第三篇，通过实际代码讲解，帮助你了解秒杀系统设计的关键点，上手实际项目。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭