3

Como puedo alinear los inputs radio button utilizando semantic ui:

body { background-color: #fefefe !important; font-size: 9px !important;}

.navbar-nav > li > a { font-size: 13px; }

/* PASOS */
.item-flow{
    text-align: center;
    border-style: none;
    background-color: #e4e7ea !important;
    border-bottom: 5px solid #d3d6d9;
    padding: 2px;
    padding-top: 10px;
    font-size: 15px;
}

.steps li{
    border-style: none;
}

.steps{
    text-align: center;
    background-color: #e4e7ea;
    border-bottom: 5px solid #d3d6d9;
}

.step-selected{
    color: #1abc9c !important;
    border-bottom: 5px solid #1abc9c;
}

.step-backon{
    color: #999;
    border-bottom: 5px solid #1abc9c;
}

.ui.steps .step.active .title {
  color: #00B5AD;
}

/* PROCESS HOME */
.proceso {
    height: 80px;
    background-color: #e4e7ea !important;;
}

.item-proceso {
    text-align: center;
    border-style: none;
    background-color: #e4e7ea !important;
    padding: 2px;
    padding-top: 10px;
    font-size: 15px;
    height: 80px;
}

.img-zoom {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}

.img-zoom:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}



.item-proceso > span { color: #1abc9c !important; }
.item-next-proceso {
    text-align: center;
    border-style: none;
    background-color: #e4e7ea !important;
    border-bottom: 5px solid #1abc9c;
    padding: 2px;
    padding-top: 10px;
    font-size: 15px;
    height: 35px;
}

/* LEFT BAR */
.leftbar {
    background: rgba(224,251,255,1);
    background: -moz-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(224,251,255,1)), color-stop(100%, rgba(126,209,224,1)));
    background: -webkit-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: -o-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: -ms-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: linear-gradient(to bottom, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0fbff', endColorstr='#7ed1e0', GradientType=0 );
}

.img-cover {
  object-fit: cover;
  width: auto;
  height: 200px;
}

.leftbar .img{
  background-image: url('https://cdn-images-1.medium.com/max/2000/1*ULAxhomRYK83uTAFf-acRg.jpeg');
  background-size: 130%;
  object-fit: cover;
  height: 150px;
  width: 100%;
  
  text-align: center;
}

.leftbar-link{
  
  text-shadow: rgb(0,0,0);
}

.stripe-submit{
  background-image: none !important;
  background-color: #1abc9c !important;
}

.stripe-submit span{
  background-image: none !important;
  background-color: #1abc9c !important;
}
/* ********** FIX NAVBAR MENU ON MOBILE ****************/
.mobile-navbar { display:  none !important; }
#main_body { backgroun-color: #fff !important; }
@media only screen and (max-width: 700px) {
  .desktop-navbar {
      display: none !important;
  }
  
  .mobile-navbar {
      display: block !important;
  }
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/semantic.min.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://semantic-ui.com/semantic/dist/semantic.min.js"></script>
</head>


<body id="main_body">

  <div class="pusher">
    <div class="ui vertical center aligned segment">
      <div class="ui container">
        <form class="ui form">
          <div class="fields">
            <div class="field">
              <label>* Has a Certified Copy of the Birth Registration been previously issued for this birth?</label>
            </div>
            <div class="field">
              <div class="ui radio checkbox">
                <label>Yes</label>
                <input required type="radio" name="birth-reg-previously-issued" value="yes">
              </div>
            </div>
            <div class="field">
              <div class="ui radio checkbox">
                <label>No</label>
                <input required type="radio" name="birth-reg-previously-issued" value="no">
              </div>
            </div>
          </div>
        </form>


      </div>
    </div>
  </div>
</body>

</html>

1
  • A que te refieres con alinear a la derecha. Que estén juntos lado a lado en un solo linea? O la derecha del texto? Commented el 1 dic. 2019 a las 21:03

2 respuestas 2

1

No sé si servirá de algo, dado que ha pasado bastante tiempo pero sería:

.field{
width:315px; //Soy demasiado perfeccionista y es que sin esta instrucción el div es tán largo que ocupa de lado a lado.
}

.radio{
  float: right; //Mueve los radio a la derecha.
display: block; //Alinea los radio para que no esten un al lado del otro.
text-align:right; //Alinear el texto a la derecha.
width: 200px; //para que no este el otro radio al lado (puedes poner porcentajes, yo lo hice pensando en la ventana de ejecución de SOes.
}

Para alinear las etiquetas y el texto a la derecha del div.fields.

He comprobado que funcione y aquí esta la demostración:

body { background-color: #fefefe !important; font-size: 9px !important;}

.navbar-nav > li > a { font-size: 13px; }

/* PASOS */
.item-flow{
    text-align: center;
    border-style: none;
    background-color: #e4e7ea !important;
    border-bottom: 5px solid #d3d6d9;
    padding: 2px;
    padding-top: 10px;
    font-size: 15px;
}

.steps li{
    border-style: none;
}

.steps{
    text-align: center;
    background-color: #e4e7ea;
    border-bottom: 5px solid #d3d6d9;
}

.step-selected{
    color: #1abc9c !important;
    border-bottom: 5px solid #1abc9c;
}

.step-backon{
    color: #999;
    border-bottom: 5px solid #1abc9c;
}

.field{
width:315px;
}

.radio{
  float: right;
display: block;
text-align:right;
width: 200px;
}

.ui.steps .step.active .title {
  color: #00B5AD;
}

/* PROCESS HOME */
.proceso {
    height: 80px;
    background-color: #e4e7ea !important;;
}

.item-proceso {
    text-align: center;
    border-style: none;
    background-color: #e4e7ea !important;
    padding: 2px;
    padding-top: 10px;
    font-size: 15px;
    height: 80px;
}

.img-zoom {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}

.img-zoom:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}



.item-proceso > span { color: #1abc9c !important; }
.item-next-proceso {
    text-align: center;
    border-style: none;
    background-color: #e4e7ea !important;
    border-bottom: 5px solid #1abc9c;
    padding: 2px;
    padding-top: 10px;
    font-size: 15px;
    height: 35px;
}

/* LEFT BAR */
.leftbar {
    background: rgba(224,251,255,1);
    background: -moz-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(224,251,255,1)), color-stop(100%, rgba(126,209,224,1)));
    background: -webkit-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: -o-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: -ms-linear-gradient(top, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    background: linear-gradient(to bottom, rgba(224,251,255,1) 0%, rgba(126,209,224,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0fbff', endColorstr='#7ed1e0', GradientType=0 );
}

.img-cover {
  object-fit: cover;
  width: auto;
  height: 200px;
}

.leftbar .img{
  background-image: url('https://cdn-images-1.medium.com/max/2000/1*ULAxhomRYK83uTAFf-acRg.jpeg');
  background-size: 130%;
  object-fit: cover;
  height: 150px;
  width: 100%;
  
  text-align: center;
}

.leftbar-link{
  
  text-shadow: rgb(0,0,0);
}

.stripe-submit{
  background-image: none !important;
  background-color: #1abc9c !important;
}

.stripe-submit span{
  background-image: none !important;
  background-color: #1abc9c !important;
}
/* ********** FIX NAVBAR MENU ON MOBILE ****************/
.mobile-navbar { display:  none !important; }
#main_body { backgroun-color: #fff !important; }
@media only screen and (max-width: 700px) {
  .desktop-navbar {
      display: none !important;
  }
  
  .mobile-navbar {
      display: block !important;
  }
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/semantic.min.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://semantic-ui.com/semantic/dist/semantic.min.js"></script>
</head>


<body id="main_body">

  <div class="pusher">
    <div class="ui vertical center aligned segment">
      <div class="ui container">
        <form class="ui form">
          <div class="fields">
            <div class="field">
              <label>* Has a Certified Copy of the Birth Registration been previously issued for this birth?</label>
            </div>
            <div class="field">
              <div class="ui radio checkbox">
                <label>Yes</label>
                <input required type="radio" name="birth-reg-previously-issued" value="yes">
              </div>
            </div>
            <div class="field">
              <div class="ui radio checkbox">
                <label>No</label>
                <input required type="radio" name="birth-reg-previously-issued" value="no">
              </div>
            </div>
          </div>
        </form>


      </div>
    </div>
  </div>
</body>

</html>

-1
.field{
  width:50px;
  display: inline-block;
}

Así de simple.

2
  • Solo quiero alinear los input radio , no el label a la derecha. no pegadito al texto sino al lado derecho del contenedor Commented el 2 may. 2018 a las 23:01
  • 1
    Intenta explicar por que esa es la respuesta correcta y hacer un pequeño resumen del código para que quien no lo entienda pueda comprenderlo con rapidez. Échale un vistazo a Cómo responder.
    – GDP
    Commented el 4 may. 2018 a las 10:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.