Skip to main content
3 de 4
added additional tags

Ajustar varias listas <ul> a una sola altura vertical (texto ajustado vertical mente)

Tengo 4 <ul> las cuales tienen contenido disparejo, estoy tratando ha ajustar las 4 listas a un solo tamaño introducir la descripción de la imagen aquí

codigo html de la pagina y los estilos que le estoy agregando

#planes {padding-top:47px; background-color: rgba(208,207,207,1
    );}

.our_planes {padding:71px 0 78px; background-color: #fff}

 span.separator{
    border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:1px; padding:0;
}
ul li a.i1, ul li a.i2 {
    font-size: larger;
    font-weight: 600;
}
ul li.active a.i1, ul li.active a.i2  {
    border: 1.5px solid #059279 !important;
    border-bottom: #0000 !important;
}



.sngl_pricing ul {
/* border : #b4b4b4 solid 5px; */
margin : 0;
padding : 0;transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s
}

@media {

}
.sngl_pricing ul li {
color : #666666;
font-family : sans-serif;
font-size : 14px;
list-style : none outside none;
text-transform : capitalize;
/* border-top : 2px solid #b4b4b4; */
padding : 7px 0;
text-align : center;

font-weight: 550;
}
.sngl_pricing ul li:first-child {
border-top : 0;
}

.our_planes .nav-tabs{
    border-bottom: 2px solid #105089;
}

.our_planes .nav-tabs>li {
    margin-bottom: -2px;
    }

.sngl_pricing {
text-align : center;
/* border : #b4b4b4 solid 5px; */
margin-bottom: 5px;
}
#web-dev .sngl_pricing:hover {
border : #03c5c3 solid 5px;transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s
}
#social .sngl_pricing:hover {
    border : #7303a9 solid 5px;transition: all 1s ease 0s;
}


.sngl_pricing > h2 {
color : #fff;
font-size : 20px;
font-weight: 500;
margin : 0;
padding : 10px;
text-transform : uppercase;
/* background-color: #059279; */
/* background-image : url("../images/clean_code_bg.jpg"); */

}
 .p_b_color{
     background-image: linear-gradient(to right bottom, #032bc5, #0064e5, #008ae5, #00a9d3, #03c5c3);
    background-color: none;
}
.s_b_color{
     background-image: linear-gradient(to left bottom, #7303a9, #6512b0, #541cb7, #3c24be, #032bc5);
     background-color: none;
}

div.ecommerce:hover {
    border-color: #008000;
}

.sngl_pricing > h2.ecommerce {
        background-color: #008000;
}

.title_bg_1 {
background-image : url("../img/basic.jpg");
ba;ckground-position : center center;
background-repeat : no-repeat;
background-size : 100% 100%;
}
.title_bg_2 {
background-image : url("../img/standar.jpg");
background-position : center center;
background-repeat : no-repeat;
background-size : 100% 100%;
}
.title_bg_3 {
background-image : url("../img/extended.jpg");
background-position : center center;
background-repeat : no-repeat;
background-size : 100% 100%;
}
.sngl_pricing > h3 {
background : none 0 0 repeat scroll #b4b4b4;
color : #515050;
font-size : 33px;
margin : 0;
padding : 20px 0;
}
.currency {
font-size : 18px;
position : relative;
top : -18px;
}
.monuth {
font-size : 24px;
text-transform : none;
}
.btn.pricing_btn {
background : none 0 0 repeat scroll #105089;
border : #666666 solid 1px;
color : #fff;
text-transform : uppercase;
padding : 10px 30px;
}



.sngl_pricing ul {
margin : 0;
padding : 24px 0;
}
.sngl_pricing a {
margin-top : 30px;
}
<div id="web-dev" class="tab-pane fade in clearfix active">
                      <h4 class="margtop20">Enlace su empresa a la web con nuestro servicio de desarrollo.</h4>

                        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                          <div class="sngl_pricing">
                            <h2 class="title_price p_b_color">Inicial</h2>

                            <ul>
                              <li>Plantilla Personalizada</li>
                              <li>Hasta 3 páginas para contenido</li>
                              <li>Nombre de dominio</li>
                              <li>1000mb de hospedaje</li>
                              <li>Integración de redes Sociales</li>
                              <li>Responsive Design</li>
                              <li>Formulario de Contacto</li>
                              <li>Mantenimiento y Administración</li>
                              <li >Publicación y Registro de la Web</li>
                              <li>Correo Corporativo</li>
                              <li>Publicación En Español</li>
                              
                              <li><a href="" class="margtopboton btn pricing_btn" data-toggle="modal" data-target="#p-i-form">Solicitar</a></li>
                            </ul>
                          </div>
                      </div>

                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                        <div class="sngl_pricing">
                          <h2 class="title_price p_b_color">Empresarial</h2>
                          <ul>
                            <li>Plantillas Personalizadas.</li>
                            <li>8 páginas para contenido.</li>
                            <li>Modulo de Registro.</li>
                            <li>Nombre de dominio .com.ve</li>
                            <li>2000mb de hospedaje.</li>
                            <li>Integración de redes Sociales.</li>
                            <li>Responsive Design.</li>
                            <li>Formulario de Contacto.</li>
                            <li>Mantenimiento y Administración.</li>
                            <li>Publicación y Registro de la Web.</li>
                            <li>Correo Corporativo.</li>
                            <li>Autoadministrable.</li>
                            <li>Publicación en Español.</li>
                            <li><a href="" class="btn pricing_btn" data-toggle="modal" data-target="#p-e-form">Solicitar</a></li>

                          </ul>
                        </div>
                      </div>
                      <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                        <div class="sngl_pricing">
                          <h2 class="title_price p_b_color">Profesional</h2>

                          <ul>
                            <li>Plantillas Personalizadas.</li>
                            <li>Multiples páginas para contenido</li>
                            <li>Modulo administrativo y registro</li>
                            <li>Nombre de dominio .com.ve</li>
                            <li>3000mb de hospedaje</li>
                            <li>Integración de redes Sociales</li>
                            <li>Responsive Design</li>
                            <li>Formulario de Contacto.</li>
                            <li>Mantenimiento y Administración.</li>
                            <li>Publicación y Registro de la Web.</li>
                            <li>Correo Corporativo.</li>
                            <li>Autoadministrable.</li>
                            <li>Publicación En Ingles y Español.</li>
                            <li><a href="" class="btn pricing_btn" data-toggle="modal" data-target="#p-p-form">Solicitar</a></li>
                          </ul>
                        </div>
                    </div>
                      <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                          <div class="sngl_pricing ecommerce">
                            <h2 class="title_price ecommerce">E-commerse</h2>
                            <ul>
                              <li>Plantillas Personalizadas.</li>
                              <li> Sin limite de Productos.</li>
                              <!-- <li>Modulo de Registro de Usuarios.</li> -->
                              <li>Nombre de dominio .com.ve</li>
                              <li>3000mb de hospedaje.</li>
                              <li>Integración de redes Sociales.</li>
                              <li>Responsive Design.</li>
                              <li>Mantenimiento y Administración.</li>
                              <li>Publicación y Registro de la Web.</li>
                              <li>Correo Corporativo.</li>
                              <li>Autoadministrable.</li>
                              <li>Publicación en Español.</li>
                              <li><a href="#" class="btn pricing_btn"  data-toggle="modal" data-target="#model-web">Solicitar</a></li>

                            </ul>
                          </div>
                        </div>

                    </div>  <!-- // WEB-DEV -->