Question

我试图将单选按钮与表单的其余部分对齐，并且还尝试使单选按钮的文本与单选按钮一致。我还要一个标签说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/

Answer 1

我认为您只想为文本类型的输入字段指定高度，而不是单选按钮。您可以使用css选择器Row no RegID Code Update Date 6 101 CMPS 30/06/2018代替第36行中的input[type="text"]来实现。

排列单选按钮

1 个答案: