"display: block" in the Survey Form

HTML-CSS
1

I didn’t understand why I have to put “display: block;”.
I checked it with and without it.

.radio, .checkbox {
  position: relative;/*Criterion is the original position*/
  left: -43px;
  margin-left: 10px;
  display: block;/*What for?*/
  padding-bottom: 10px;
}

Thank you so much
https://codepen.io/taichi_u0/pen/yLBagbx

2

radio and checkbox are class of li element and li element is list-item element by default, so you should give it display:block; to make it block leave an element, maybe i could be wrong i am new to css

3

Thank you so much for your words.

Do you mean this? Is this recognition correct?

  1. input type=“radio” is inline element.
  2. So we need to put “display: block;” so that the list is displayed vertically.
4

Basically yes. The input is inline-block so setting it to block will make the element take up the full with of the container.

But in the case of the example project .radio is actually being applied to an <li> and as you probably already know each <li> already takes up its own line (otherwise it wouldn’t really be a list item). What it does do (changing it from the default display: list-item to display: block) is remove the bullet point from the <li>. But that is actually a bit redundant because the <ul> already has an inline style on it which is removing the list style (the project should really be fixed and not have inline styles).

I would suggest always just testing stuff. Open up a Codepen and try it out.

<input type="radio">
<input type="radio">

<div class="container">
  <input type="radio">
  <input type="radio">
</div>

<ul>
  <li>test</li>
  <li>test</li>
</ul>

.container input[type="radio"] {
  display: block;
}

ul li {
  display: block;
}
5

Thank you so much for your words. I understood it at last.

And I didn’t notice that in the example project, < li > has radio and < input > inside.

I experimented your example with codepen. Thank you so much.

So I think I can remove display: block; from .radio, checkbox.
I checked it with Codepen.
It’s because the bullet point from the < li > is removed by putting setting < input > inside < li >.

My recognition is correct?

6

Not sure I understand this sentence but think the answer is no.

  1. You can remove display: block from the .radio, .checkbox selector because it will not change the layout.

  2. However, if you were to remove the inline style (style="list-style: none;) on the <ul> elements…

<ul style="list-style: none;">
...rest of code

and

<ul id="preferences" style="list-style: none;">
...rest of code

…you would see the bullet points (the list-style) again.

  1. The best way to remove the list-style is to do it on the <ul>, I would move the inline style to the CSS instead.
ul {
  list-style: none;
}

Not really sure if I answered your question.

1 Like
7

I’m sorry for the late reply. I understood now.
Thank you so much!!!