时间戳

首页 > 解决方案 > 排列单选按钮

html - 排列单选按钮

问题描述

我正在尝试将我的单选按钮与我的表单的其余部分对齐，并且我也在尝试使单选按钮文本与单选按钮一致。我还想要一个标签来表示 cvType，然后是该标签旁边的按钮。我曾尝试使用该form-control课程，但它使我的按钮非常大，所以我决定将其取出，任何帮助将不胜感激

HTML

<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COM109 Web_Form</title>

</head>
<body>
    <div class="contact-title">
        <h1 >Contact Us</h1>
    </div>
    <div>
        <form id="contact-form" method="post" action="">

            <input type="text" name="FirstName" class="form-control" placeholder="Your First Name" required><br>

            <input type="text" name="Surname" class="form-control" placeholder="Your Surname" required><br>

            <input type="text" name="CompanyName" class="form-control" placeholder="Your Company Name" required><br>

            <textarea name="comment" class="form-control" placeholder="Leave a Comment" rows="5"></textarea><br>

            Short <input type="radio" name="cvType" class="radio" value="Short">

            Long <input type="radio" name="cvType" class="radio" value="Long"><br>

            <input type="submit" class="form-control submit" value="Submit">
        </form>
    </div>
</body>

CSS

body {
background-color: #85CDCA;
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
}

.contact-title {
    margin-top: 100px;
    color: black;
    text-transform: uppercase;
}

.contact-title h1 {
    font-size: 32px;
    line-height: 10px;
}

form {
    margin-top: 50px;
}

.form-control {
    width: 600px;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid Black;
    color: #000000;
    font-size: 18px;
    margin-bottom: 16px; 
    resize: none;
}

input{
    height: 45px;
}

form .submit{
    background: pink;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}

form .submit:hover{
    background-color: peachpuff;
    cursor: pointer;
}

运行示例以显示我的问题：https ://jsfiddle.net/Darren_jr/x4oL1m32/2/

标签： htmlcss

解决方案

我认为您只想为文本类型的输入字段指定高度，而不是为单选按钮指定高度。你可以通过使用 css 选择器input[type="text"]而不是仅仅input在第 36 行来做到这一点。

推荐阅读