我正在尝试水平和垂直对齐这些单选按钮/复选框,我也希望文本位于它们的左侧。我尝试了一些内联和块之类的东西,但我还是个初学者,正在努力学习。
这是我的小项目的 HTML 和 CSS 代码:
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
body {
width: 100%;
height: 100%;
margin: 0;
background: #1b1b32;
color: white;
font-family: Consolas, serif;
font-size: 17px;
}
h1,
p {
margin: 20px auto;
text-align: center;
}
form {
margin: 0 auto;
width: 600px;
max-width: 1000px;
min-width: 300px;
padding-bottom: 2em;
padding-top: 1em;
background-blend-mode: color;
}
fieldset {
margin: auto;
padding: 20px;
border-radius: 30px;
border-color: #6b6b8d;
}
label {
display: block;
margin: auto;
text-align: left;
font-size: 16px;
padding-bottom: 10px;
width: 100%;
}
input,
textarea,
select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
margin: 10px 0 0 0;
border-radius: 20px;
border: 1px solid #0a0a23;
background-color: #0a0a23;
color: #ffffff;
text-indent: 5px;
}
.input-radio,
.input-checkbox {
display: block;
margin: auto;
min-height: 1.25rem;
min-width: 1.25rem;
}
.inline-field {
display: inline;
margin-bottom: 10px;
/* I added this after I posted my reply */
vertical-align: middle;
/* Fixes any weird issues in Firefox and IE */
}
.input-textarea {
display: block;
margin-left: auto;
margin-right: auto;
height: 120px;
text-indent: 5px;
}
.submit-button {
display: block;
width: 50%;
margin: 1em auto;
height: 30px;
font-size: 1.1rem;
background-color: #3b3b4f;
border-radius: 20px;
border-color: #6b6b8d;
min-width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Registration Form</title>
<link rel="stylesheet" href="survey.css">
</head>
<body>
<div class="container">
<h1 id="title">Pepe's Survey Form</h1>
<p id="description">Thank you for taking time to help us improve the platform</p>
<form method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
<fieldset>
<label id="name-label">Enter your first name:<input class="form-control" id="name" type="text"
placeholder="Enter your name" required></label>
<label id="email-label">Email:<input class="form-control" id="email" type="email"
placeholder="Enter your email" required></label>
<label id="number-label">Age(optional)<input class="form-control" id="number" type="number"
placeholder="Enter your age" required min="18"
max="100"></label>
<label for="referrer">How did you hear about us?
<select class="dropdown" id="referrer" name="referrer">
<option disabled selected value>Select current trading style</option>
<option value="1">Intraday Trader</option>
<option value="2">Swing Trader</option>
<option value="3">Investor</option>
</select>
</label>
<div class="inline-field">
<label class="input-radio"><input class="input-radio" id="Yes" name="Yes-No" checked
type="radio" value="Yes">Yes</label>
<label class="input-radio"><input class="input-radio" id="No" name="Yes-No" type="radio"
value="No">No</label>
</div>
<label class="input-checkbox">What would you like to see improved?
<small>(Check all that apply)</small>
<input class="input-checkbox" type="checkbox" value="more-charts">More Charts
<input class="input-checkbox" type="checkbox" value="new-screener">New Screener
<input class="input-checkbox" type="checkbox" value="better-execution">Better execution speed
<input class="input-checkbox" type="checkbox" value="blog-page">Blog Page
</label>
<label>Any comments or suggestions?
<textarea class="input-textarea" id="Textarea" rows="3" cols="30"
placeholder="I want this feature.."></textarea>
</label>
<label>
<input class="submit-button" id="submit" type="submit">
</label>
</fieldset>
</form>
</div>
</body>
</html>
您可以使用 Flexbox 创建行。下面是一个例子:
HTML:
<div class="input flex row">
<input type="checkbox">
<label>Label</label>
</div>
CSS:
.input {
position: relative;
width: 200px;
height: 50px;
}
.flex.row {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}
单击下面了解有关如何使用 Flexbox 的更多信息:
为了确保水平轴和垂直轴对齐,请使用 grid 来布置复选框。
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
body {
width: 100%;
height: 100%;
margin: 0;
background: #1b1b32;
color: white;
font-family: Consolas, serif;
font-size: 17px;
}
h1,
p {
margin: 20px auto;
text-align: center;
}
form {
margin: 0 auto;
width: 600px;
max-width: 1000px;
min-width: 300px;
padding-bottom: 2em;
padding-top: 1em;
background-blend-mode: color;
}
fieldset {
margin: auto;
padding: 20px;
border-radius: 30px;
border-color: #6b6b8d;
}
label {
display: block;
margin: auto;
text-align: left;
font-size: 16px;
padding-bottom: 10px;
width: 100%;
}
input,
textarea,
select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
margin: 10px 0 0 0;
border-radius: 20px;
border: 1px solid #0a0a23;
background-color: #0a0a23;
color: #ffffff;
text-indent: 5px;
}
.input-radio,
.input-checkbox {
display: block;
margin: auto;
min-height: 1.25rem;
min-width: 1.25rem;
}
.inline-field {
display: inline;
margin-bottom: 10px;
/* I added this after I posted my reply */
vertical-align: middle;
/* Fixes any weird issues in Firefox and IE */
}
.input-textarea {
display: block;
margin-left: auto;
margin-right: auto;
height: 120px;
text-indent: 5px;
}
.submit-button {
display: block;
width: 50%;
margin: 1em auto;
height: 30px;
font-size: 1.1rem;
background-color: #3b3b4f;
border-radius: 20px;
border-color: #6b6b8d;
min-width: 300px;
}
.d1 {
display: grid;
grid-template-columns: max-content auto;
gap: 0 1em;
margin: 10px 0 0 1em;
}
<div class="container">
<h1 id="title">Pepe's Survey Form</h1>
<p id="description">Thank you for taking time to help us improve the platform</p>
<form method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
<fieldset>
<label id="name-label">Enter your first name:<input class="form-control" id="name" type="text"
placeholder="Enter your name" required></label>
<label id="email-label">Email:<input class="form-control" id="email" type="email"
placeholder="Enter your email" required></label>
<label id="number-label">Age(optional)<input class="form-control" id="number" type="number"
placeholder="Enter your age" required min="18"
max="100"></label>
<label for="referrer">How did you hear about us?
<select class="dropdown" id="referrer" name="referrer">
<option disabled selected value>Select current trading style</option>
<option value="1">Intraday Trader</option>
<option value="2">Swing Trader</option>
<option value="3">Investor</option>
</select>
</label>
<label class="input-checkbox">What would you like to see improved?
<small>(Check all that apply)</small>
<div class="d1">
More Charts <input class="input-checkbox" type="checkbox" value="more-charts">
New Screener <input class="input-checkbox" type="checkbox" value="new-screener">
Better execution speed <input class="input-checkbox" type="checkbox" value="better-execution">
Blog Page <input class="input-checkbox" type="checkbox" value="blog-page">
</div>
</label>
<label>Any comments or suggestions?
<textarea class="input-textarea" id="Textarea" rows="3" cols="30"
placeholder="I want this feature.."></textarea>
</label>
<label>
<input class="submit-button" id="submit" type="submit">
</label>
</fieldset>
</form>
</div>
对您的初始代码的小改进建议。
我建议您了解“flex”布局概念(https://css-tricks.com/snippets/css/a-guide-to-flexbox/)以更轻松地处理您的位置:)
body {
width: 100%;
height: 100%;
margin: 0;
background: #1b1b32;
color: white;
font-family: Consolas, serif;
font-size: 17px;
}
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
h1,
p {
margin: 20px auto;
text-align: center;
}
form {
margin: 0 auto;
width: 600px;
max-width: 1000px;
min-width: 300px;
padding-bottom: 2em;
padding-top: 1em;
background-blend-mode: color;
}
fieldset {
margin: auto;
padding: 20px;
border-radius: 30px;
border-color: #6b6b8d;
}
label {
display: block;
font-size: 16px;
}
input,
textarea,
select {
box-sizing: border-box;
min-height: 30px;
border-radius: 20px;
border: 1px solid #0a0a23;
background-color: #0a0a23;
color: #ffffff;
text-indent: 5px;
text-align: left;
}
.input-group + .input-group {
margin-top: 0.5rem;
}
.input-group-v label {
margin-bottom: 10px;
}
.input-group-v input,
.input-group-v textarea,
.input-group-v select {
width: 100%;
}
.input-group-h {
display: flex;
align-items: center;
padding: 0.5rem 0;
}
.input-group-h label {
width: 200px;
}
.input-group-h label.small {
width: 50px;
}
.input-group-h .input-checkbox + label {
margin-left: 10px;
}
.input-radio,
.input-checkbox {
display: block;
min-height: 1.25rem;
min-width: 1.25rem;
}
.input-textarea {
display: block;
margin-left: auto;
margin-right: auto;
height: 120px;
text-indent: 5px;
}
.submit-button {
display: block;
width: 50%;
margin: 1em auto;
height: 30px;
font-size: 1.1rem;
background-color: #3b3b4f;
border-radius: 20px;
border-color: #6b6b8d;
min-width: 300px;
}
<div class="container">
<h1 id="title">Pepe's Survey Form</h1>
<p id="description">Thank you for taking time to help us improve the platform</p>
<form method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
<fieldset>
<div class='input-group input-group-v'>
<label id="name-label">Enter your first name:</label>
<input class="form-control" id="name" type="text" placeholder="Enter your name" required />
</div>
<div class='input-group input-group-v'>
<label id="email-label">Email:</label>
<input class="form-control" id="email" type="email" placeholder="Enter your email" required />
</div>
<div class='input-group input-group-v'>
<label id="number-label">Age(optional)</label>
<input class="form-control" id="number" type="number" placeholder="Enter your age" required min="18" max="100" />
</div>
<div class='input-group input-group-v'>
<label for="referrer">How did you hear about us?</label>
<select class="dropdown" id="referrer" name="referrer">
<option disabled selected value>Select current trading style</option>
<option value="1">Intraday Trader</option>
<option value="2">Swing Trader</option>
<option value="3">Investor</option>
</select>
</div>
<div class='input-group input-group-h'>
<label class="small">Yes</label>
<input class="input-radio" id="Yes" name="Yes-No" checked type="radio" value="Yes" />
</div>
<div class='input-group input-group-h'>
<label class="small">No</label>
<input class="input-radio" id="No" name="Yes-No" type="radio" value="No" />
</div>
<h5>
What would you like to see improved?<small>(Check all that apply)</small>
</h5>
<div class='input-group input-group-h'>
<input class="input-checkbox" type="checkbox" value="more-charts" />
<label>More Charts</label>
</div>
<div class='input-group input-group-h'>
<input class="input-checkbox" type="checkbox" value="new-screener" />
<label>New Screener</label>
</div>
<div class='input-group input-group-h'>
<input class="input-checkbox" type="checkbox" value="better-execution" />
<label>Better execution speed</label>
</div>
<div class='input-group input-group-h'>
<input class="input-checkbox" type="checkbox" value="blog-page" />
<label>Blog Page</label>
</div>
<div class='input-group input-group-v'>
<label>Any comments or suggestions?</label>
<textarea
class="input-textarea"
id="Textarea"
rows="3"
cols="30"
placeholder="I want this feature.."
></textarea>
</div>
<input class="submit-button" id="submit" type="submit">
</fieldset>
</form>
</div>
这符合你的愿景吗?
如果没有,我可以改进什么?
body {
width: 100%;
height: 100%;
margin: 0;
background: #1b1b32;
color: white;
font-family: Consolas, serif;
font-size: 17px;
}
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
h1,
p {
margin: 20px auto;
text-align: center;
}
form {
margin: 0 auto;
width: 600px;
max-width: 1000px;
min-width: 300px;
padding-bottom: 2em;
padding-top: 1em;
background-blend-mode: color;
}
fieldset {
margin: auto;
padding: 20px;
border-radius: 30px;
border-color: #6b6b8d;
}
label {
display: block;
font-size: 16px;
}
input,
textarea,
select {
box-sizing: border-box;
min-height: 30px;
border-radius: 20px;
border: 1px solid #0a0a23;
background-color: #0a0a23;
color: #ffffff;
text-indent: 5px;
text-align: left;
}
.input-group + .input-group {
margin-top: 0.5rem;
}
.input-group-v label {
margin-bottom: 10px;
}
.input-group-v input,
.input-group-v textarea,
.input-group-v select {
width: 100%;
}
.input-group-h {
display: flex;
align-items: center;
padding: 0.5rem 0;
}
.input-group-h label {
width: 200px;
}
.input-group-h label.small {
width: 50px;
}
.input-group-h .input-checkbox + label {
margin-left: 10px;
}
.input-radio,
.input-checkbox {
display: block;
min-height: 1.25rem;
min-width: 1.25rem;
display:inline-flex;
}
.input-textarea {
display: block;
margin-left: auto;
margin-right: auto;
height: 120px;
text-indent: 5px;
}
.submit-button {
display: block;
width: 50%;
margin: 1em auto;
height: 30px;
font-size: 1.1rem;
background-color: #3b3b4f;
border-radius: 20px;
border-color: #6b6b8d;
min-width: 300px;
}
.checkbox-container{
display:inline-flex;
}
.group-g{
margin-right:20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1 id="title">Pepe's Survey Form</h1>
<p id="description">Thank you for taking time to help us improve the platform</p>
<form method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
<fieldset>
<div class='input-group input-group-v'>
<label id="name-label">Enter your first name:</label>
<input class="form-control" id="name" type="text" placeholder="Enter your name" required />
</div>
<div class='input-group input-group-v'>
<label id="email-label">Email:</label>
<input class="form-control" id="email" type="email" placeholder="Enter your email" required />
</div>
<div class='input-group input-group-v'>
<label id="number-label">Age(optional)</label>
<input class="form-control" id="number" type="number" placeholder="Enter your age" required min="18" max="100" />
</div>
<div class='input-group input-group-v'>
<label for="referrer">How did you hear about us?</label>
<select class="dropdown" id="referrer" name="referrer">
<option disabled selected value>Select current trading style</option>
<option value="1">Intraday Trader</option>
<option value="2">Swing Trader</option>
<option value="3">Investor</option>
</select>
</div>
<div class='input-group input-group-h'>
<label class="small">Yes</label>
<input class="input-radio" id="Yes" name="Yes-No" checked type="radio" value="Yes" />
</div>
<div class='input-group input-group-h'>
<label class="small">No</label>
<input class="input-radio" id="No" name="Yes-No" type="radio" value="No" />
</div>
<h5>
What would you like to see improved?<small>(Check all that apply)</small>
</h5>
<div class="checkbox-container">
<div class='input-group input-group-h'>
<input class="input-checkbox" type="checkbox" value="more-charts" />
<label>More Charts</label>
</div>
<div class='input-group input-group-h'>
<input class="input-checkbox" type="checkbox" value="new-screener" />
<label>New Screener</label>
</div>
<div class='input-group input-group-h group-g'>
<input class="input-checkbox" type="checkbox" value="better-execution" />
<label>Better execution speed</label>
</div>
<div class='input-group input-group-h'>
<input class="input-checkbox" type="checkbox" value="blog-page" />
<label>Blog Page</label>
</div>
</div>
<div class='input-group input-group-v'>
<label>Any comments or suggestions?</label>
<textarea
class="input-textarea"
id="Textarea"
rows="3"
cols="30"
placeholder="I want this feature.."
></textarea>
</div>
<input class="submit-button" id="submit" type="submit">
</fieldset>
</form>
</div>
</body>
</html>