Set radio inputs in the same line and labels below in css

Question

I'm getting the labels at the side of the inputs instead of below. What I'm attempting is:

O O O O
1 2 3 4

This is my code in scss and angular. There are no styles added from typescript, only the numbers.

<div class="low_buttons">
  <div class="page_selector" id="page_selector">
    <span class="ps_item" *ngFor="let page of page_selector_items">
      <input *ngIf="page.number !== 1;else check_item" type="radio" id="{{page.number}}" name="page_number" class="page_number">
      <label for="{{page.number}}">{{page.number}}</label>
      <ng-template #check_item>
        <input type="radio" id="{{page.number}}" name="page_number" class="page_number" checked>
      </ng-template>
    </span>
  </div>
</div>

.low_buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.page_selector {
    scrollbar-width: thin;
    position: absolute;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
    padding-bottom: 15px;
    margin-left: 20px;
    width: 150px;
    height: 100px;
    .ps_item {
        margin-left: 10px;
    }
}

As I have read, this could be the problem since an span element is created for every [input/label] item, but couldn't figure it out.

Why should the spans be a _problem_, they are rather _helpful_ here, because they should make it easier to get the two below each other. Set input & label to `display: block`, and the spans to `inline-block` (or use flexbox on the parent.) — CBroe, Mar 09 '23 at 09:42
Yes they're helpful because a div or other semantic element would create a bigger problem, but still, the answers in the link that I added claim that it might be the problem. The answer you gave worked, thank you. — LautaroColella, Mar 09 '23 at 09:51

score 0 · Answer 1 · answered Mar 09 '23 at 10:47

0

.page_selector{
  display:flex;
}
.ps_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2rem;
}

answered Mar 09 '23 at 10:47

Eliseo

50,109
4
29
67

score 0 · Answer 2 · answered Mar 09 '23 at 11:33

.Sectiondiv {
    display: flex;
}
.Sectiondiv label {
    display: block;
    text-align: center;
}

<div class="Sectiondiv">
  <div>
    <input type="radio" id="html" name="fav_language" value="1">
    <label for="html">1</label>
  </div>
  <div>
    <input type="radio" id="css" name="fav_language" value="2">
    <label for="css">2</label>
  </div>
  <div>
    <input type="radio" id="javascript" name="fav_language" value="3">
    <label for="javascript">3</label>
  </div>
</div>

Try this one.

Set radio inputs in the same line and labels below in css

2 Answers2