I’m really new to html and css. I’m making a form and having two problems:
- Wide spacing between question and answers. Second pic is how I want it to look like
- Cursor:pointer went out of the text (went to top and side). I tried raising radio-buttons margin higher but then the cursor:pointer covers the question.
.form-element {
display: flex;
flex-direction: column;
margin: 0 0 20px 0;
}
.form-element span {
margin: 0 0 5px 0;
}
.radio-buttons {
display: flex;
align-items: left;
}
.radio-buttons label {
cursor:pointer;
}<div class="form-element radio-buttons">
<span>Would you like to remain anonymous?*</span>
<label for="No.‎"><br />
<input type="radio" required id="No.‎" name="entry.1808372660" value="No.‎" />
<span>No</span>
<label for="Yes"><br />
<input type="radio" required id="Yes" name="entry.1808372660" value="Yes" />
<span>Yes</span>
</div>>Solution :
<br /> remove this and try
.form-element {
display: flex;
flex-direction: column;
margin: 0 0 20px 0;
}
.form-element span {
margin: 0 0 5px 0;
}
.radio-buttons {
display: flex;
align-items: left;
}
.radio-buttons label {
cursor:pointer;
}<div class="form-element radio-buttons">
<span>Would you like to remain anonymous?*</span>
<label for="No.‎">
<input type="radio" required id="No.‎" name="entry.1808372660" value="No.‎" />
<span>No</span>
<label for="Yes"><br />
<input type="radio" required id="Yes" name="entry.1808372660" value="Yes" />
<span>Yes</span>
</div>