Question 44305 in Html Question posted in
Some basic documentation can be found here.

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

Example

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.

Tags:

2

Answers


  1. 0 
    .page_selector{
  display:flex;
}
.ps_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2rem;
}
    Login or Signup to reply.
  2. 0 
    .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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search