如何使用HTML并排放置两个投票项目？_如何使用html & css并排放置两个选择属性(格式不同)_如何并排放置两个下拉列表？ - 腾讯云开发者社区

要在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：设置每个投票项目的样式，包括边框、内边距和圆角。