Jump to content
Carcleo

Dificuldades com FlexBox e UL

Recommended Posts

Pessoal, estou com uma dúvida que está me tirando o sono!

 

Então, vou exibir 2 situações com Flexbox onde 1 delas está dando uma falha. (Será mesmo?).

 

Nessa versão, com DIV's, tudo funciona bem:


CSS:

    span.vertical {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
    }
    span.comum {        
        
    }
    div.cabecalhoVertical{
        display: flex;
        height: 200px;
        border: .1px rgb(0,0,0) solid;
        
    }
    div.cabecalhoVertical div {
        display: flex;
        flex-grow: 1;
        list-style: none;
        border-right: .1px rgb(0,0,0) solid;
        align-items: center;
        justify-content: center;
    }
    div.cabecalhoVertical div span {
        text-align: center;
        font-weight: bolder;
    }

HTML:

<div class='cabecalhoVertical'>
    <div style='width:215px;'><span class='comum'   >Nome do Gcéu </span></div>
    <div style='width:215px;'><span class='vertical'>Supervisor</span></div>
    <div style='width:215px;'><span class='comum'   >Líder</span></div>
    <div style='width:035px;'><span class='vertical'>Houve Supervisão?</span></div>
    <div style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></div>
    <div style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></div>
    <div style='width:035px;'><span class='vertical'>Membros Compromissados</span></div>
    <div style='width:035px;'><span class='vertical'>Visitantes</span></div>
    <div style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
    <div style='width:035px;'><span class='vertical'>Total de presentes</span></div>
    <div style='width:035px;'><span class='vertical'>Ofertas</span></div>                    
    <div style='width:035px;'><span class='vertical'>Disicpulados</span></div>                    
    <div style='width:035px;'><span class='vertical'>Número de decisões</span></div>            
</div>    

Resultado:

a.thumb.jpg.554479fd09a212a9035997cbf50e3bb6.jpg

 

Agora com UL -> A falha:

 

CSS:

    span.vertical {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
    }
    span.comum {        
        
    }
    ul.cabecalhoVertical{
        display: flex;
        height: 200px;
        border: .1px rgb(0,0,0) solid;
        
    }
    ul.cabecalhoVertical li {
        display: flex;
        flex-grow: 1;
        list-style: none;
        border-right: .1px rgb(0,0,0) solid;
        align-items: center;
        justify-content: center;
    }
    ul.cabecalhoVertical li span {
        text-align: center;
        font-weight: bolder;
    }


HTML:

<ul class='cabecalhoVertical'>
    <li style='width:215px;'><span class='comum'   >Nome do Gcéu </span></li>
    <li style='width:215px;'><span class='vertical'>Supervisor</span></li>
    <li style='width:215px;'><span class='comum'   >Líder</span></li>
    <li style='width:035px;'><span class='vertical'>Houve Supervisão?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></li>
    <li style='width:035px;'><span class='vertical'>Membros Compromissados</span></li>
    <li style='width:035px;'><span class='vertical'>Visitantes</span></li>
    <li style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></li>
    <li style='width:035px;'><span class='vertical'>Total de presentes</span></li>
    <li style='width:035px;'><span class='vertical'>Ofertas</span></li>                    
    <li style='width:035px;'><span class='vertical'>Disicpulados</span></li>                    
    <li style='width:035px;'><span class='vertical'>Número de decisões</span></li>            
</ul>    

Percebam agora na print como aparece um bloco adicional no lado esquerdo antes da primeira LI

b.png

 

Gostaria de saber 2 coisas:

 

1) Porquê isso acontece uma vez que list-style está setado para none nas LI's?

2) Como corrigir essa falha?

 

Obrigado a quem puder ajudar.

Share this post


Link to post
Share on other sites

Fala irmão, beleza?

 

1) Isso acontece porque as UL por padrão vem com essas propriedade aqui.  

 

    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;

Perceba a última propriedade: padding-inline-start: 40px;

É justamente ela que está dando esse espaçozinho dos inferno rsrs...

1.1) obs: Se quiser, crie uma ul qualquer e inspecione ela que você verá essas props padrões delas.

 

2) Para resolver isso diretamente, você pode tirar o padding dessa ul: 

ul.cabecalhoVertical{
  padding: 0;
  display: flex;
  height: 200px;
  border: .1px rgb(0,0,0) solid;        
}

Ou posso te passar uma prática minha, que eu gosto de fazer, que é resetar todos os paddings e margins de todos os elementos, e só adiciono padding e margin quando eu necessito,

Então fazendo o reset = 

* {
  margin: 0;
  padding: 0;
}

2.1) O * faz referências a todos os elementos do seu HTML, assim aplica o estilo que esta la dentro para todos os elementos.

 

Valeu irmão, abraços! Bons estudos

Share this post


Link to post
Share on other sites

Cara, muiito top. Ops,  muito jóia.

 

Obrigado!

 

Essa prética, eu tamém uso. Mas estava fazendo esse texte em um arquivb seprsdo e nele e não coloquei o resset

* {
  margin: 0;
  padding: 0;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By chuxi
      <div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
    • By gbilibio
      Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do
      navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css:
       
      Página HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
          <head>
              <meta charset="UTF-8"/>
              <title>Aula 07</title>
              <link rel="stylesheet"
              type="text/css" href="style.css"/>
              <meta name="viewport"
              content="width=device-width, 
              initial-scale=1.0"/>
          </head>
          <body>
              <header>
                  <div class="contatos">
                      <div class="cont">
                          <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p>
                      </div>
                  </div>
              </header>
              <div class="topo">
                  <div class="contatos2">
                      <div class="cont2">
                          <img  align="right" src="logo.png">
                      </div>
                      <div class="cont2">
                          <p> HOME </p>
                      </div>
                      <div class="cont2">
                          <p> EMPRESA </p>
                      </div>
                      <div class="cont2">
                          <p> SERVIÇOS </p>
                      </div>
                      <div class="cont2">
                          <p> HOSPEDAGEM </p>
                      </div>
                      <div class="cont2">
                          <p> PORTIFÓLIO </p>
                      </div>
                      <div class="cont2">
                          <p> CONTATO </p>
                      </div>
                  </div>
              </div>
              <div class="banner">
              
              </div>
              <div class="banner2">
              
                  <div class="banneresq">
                  <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1>
                  <div class="linhatexto">
                  
                  </div>
                  <p> 
                  Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br>
                  no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br>
                  são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br>
                  Bem para Atender Sempre.<br>
                  </p>
                  <div class="botaoentrar" >
                  <h1>Entrar</h1>
                  </div>
                  </div>
                  
                  <div class="bannerdir">
                  
                  <img src="Imagens/bannerdireita2.jpg" width="320" height="280">
                  
                  </div>
              </div>
              <div class="banner3">
                  
                  <div class="caixamaior">
                      <div class="caixa1">
                          <img src="Imagens/box1.jpeg" width="250" height="200">
                              <div align="center">
                                  <p> CRIAÇÃO DE SITES </p>
                              </div>
                              <div class="caixa1texto">
                                  <h1> 
                                  Temos desde sites simples de 1 página,<br>
                                  modelos padrões e personalizados<br>
                                  com páginas internas. Confira nossos<br>
                                  modelos ou solicite um.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa2">
                          <img src="Imagens/box2.jpg" width="250" height="200">
                              <div align="center">
                                  <p> HOSPEDAGEM DE SITES </p>
                              </div>
                              <div class="caixa2texto">
                                  <h1>
                                  Hospede um site em um servidor<br>
                                  confiável e de qualidade, que sempre<br>
                                  lhe dê suporte necessário. Deixe seu<br>
                                  site 100% online.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa3">
                          <img src="Imagens/box3.jpg" width="250" height="200">
                              <div align="center">
                                  <p> MANUTENÇÃO DE SITES </p>
                              </div>
                              <div class="caixa3texto">
                                  <h1>
                                  Mantenha seu site sempre atualizado,<br>
                                  passando credibilidade aos seus<br>
                                  clientes e ganhando ponto com o<br>
                                  Google e outros buscadores.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                          
                      </div>
                      
                  </div>
              
              </div>
          </body>
      </html>
       
      PÁGINA CSS
       
      @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
      @import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
      @import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700');
      @import url('https://fonts.googleapis.com/css?family=Karla:400,700');
      header{
          width: 100%;
          height: auto;
          overflow: hidden;
          background-color: #023180;
          margin: auto;
      }
      body{
          margin: 0px;
      }
      .contatos{
          width: 100%;
          max-width: 900px;
          height: auto;
          overflow: hidden;
          margin: auto;
      }
      .cont{
          width: 33.3%;
          height: 40px;
          float: left;
      }
      .cont p{
          color:#ffffff;
          font-family: 'Muli';
          font-weight: 400;
      }
      .topo{
          width:80%;
          height:120px;
          float:right;
          
      }
      .cont2{
          font-family:'Cabin';
          color:#023180;
          width:13.3%;
          height:40px;
          float:left;
          
      }
      .cont2 p{
          font-size:15px;
          margin-left:100px;
          margin-top:30px;
          
      }
      .logo{
          margin-left:350px;
          margin-top:10px;
      }
      .banner{
          width:100%;
          height:500px;
          background:url(Imagens/banner.jpg);
          float:left;
          margin-top:30px;
      }
      .banner3{
          width:100%;
          height:500px;
          background-color:#083875;
          float:left;
          margin-top:50px;
          vertical-align: middle;
      }

      .caixamaior{
          width:100%;
          height:auto;
          
      }
      .caixamaior p{
          color:#FFFFFF;
          font-family:'Scada';
          
      }
      .caixa1texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa2texto h1{    
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa3texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .botaosaibamais{
          
          width:150px;
          height:50px;
          background-color:#21588E;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
          margin-left:45px;
          margin-top:20px;
      }
      .botaosaibamais h1{
          font-family:'Scada';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;    
      }
      .caixa1{
          margin-left:15%;
          margin-top:5%;
          float:left;    
      }
      .caixa2{
          
          margin-left:10%;
          margin-top:5%;
          float:left;    
      }
      .caixa3{    
          margin-left:10%;
          float:left;
          margin-top:5%;
      }
      .banneresq{
          float:left;
          margin-left:120px;
          margin-top:65px;
      }
      .banneresq h1{
          font-family: 'Oxygen';
      }
      .banneresq p{
          color:#3F3B3B;
          font-family: 'Oxygen';
          font-size:16px;
      }
      .linhatexto{
          width:75px;
          height:4px;
          background-color:#A11606;
          margin-top:-5px;
      }
      .botaoentrar{
          width:150px;
          height:50px;
          background-color:#800000;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
      }
      .botaoentrar h1{
          font-family:'Oxygen';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;
      }
      .bannerdir{
          float:left;
          margin-top:60px;
          margin-left:70px;    
      }
      @media only screen and (max-width: 600px){
          .cont{
              width: 100%;
          }
          .cont p{
              text-align: center;
          }
          
          .banner{
              width:100%;
          
          }
      }
    • By Magalha
      Boa noite amigos,
       
      Primeiramente queria dizer que sou iniciante e sei muito pouco de programação (quase 0). Estou me virando para colocar um site no ar sozinho. Fiz algumas alterações usando css em meu site (fui introduzindo uma a uma e testando em diversos dispositivos).
       
      Porem tem uma que esta me dando dor de cabeça! Alterei apenas a cor do backgroun e do texto na minha barra de navegação da seguinte forma:
       
      "body .main-navigation, .navigation-container .site-title, .navigation-container ul li a, .navigation-container .icon-search {
          background: #ffffff;
            color: #d83200; 
      }"
       
      Porem, quando acesso o site via dispositivo móvel os ícones e o texto da barra de navegação principal estão na cor branca (ou seja backgroun branco e letras + ícones brancos). Já tentei de tudo e não consigo achar a classe que altera isso, tenho 03 dias revirando a net e nada! Se for algo complexo estou disposto a pagar pelo serviço.
       
      o site é www.naviagemdeviajar.com.br

    • By Matt_Engler
      Por favor, preciso de ajuda para meu TCC onde terei que criar um site. Eis o problema, utilizei o CSS para estilizar os links do site, dessa maneira:
       
      a{
          color: white;
          text-decoration: none;
          padding: 5px 10px;
      }
      a:link{
          color: white;
      }
      a:visited{
          color: white;
      }
      a:hover{
          color: black;
          background-color: white;
      }
       
      Essa estilização foi aplicada a todos os links do site, porém, quero aplicá-la a apenas alguns links específicos (no caso, os links do top). Como faço para "isolar" a estilização de cada link?!
       
      Abaixo disponibilizo o HTML e o CSS do site, desde já agradeço!
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>Anything</title>
          <link rel="stylesheet" type="text/css" href="css/Stil.css">
      </head>
      <body>
      <!-- Inicio do Menu -->
      <div class="haus">
          <div class="area">
              <h1 class="logo"> <span class="yellow">&emsp;<img src="Logo.png" width="325" height="50"></span> </h1>
              <div class="menu">
                  <a href="Haus.html">Haus</a>
                  <a href="#">Nachrichten</a>
                  <a href="#">Kino</a>
              </div>
          </div>n
      </div>
      <!-- Fim do menu -->
      <!-- Inicio do Conteúdo -->
      <br>
      <div class="area-principal">
          
          <div class="postagem">
              <h2><a href="#"> Título da Notícia:</a></h2>
              <span class="data-postagem">Data da postagem:</span>
              <img src="img/imagem1.png" class="img-postagem">
              <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
              <span>Postado por: Fulano</span>
                  </div>
      </div>
      </body>
      </html>
       
      ================================================================================================================================================================
       
      *{
          margin: 0px;
          padding: 0px;
      }
      body{
          background-color: lightgray;
          font-size: 16px;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
          color: black;
      }
      .haus{
          font-size: 25px;
          color: yellow;
          background-color: black;
          border-bottom: 7px solid gold;
          height: 50px;
          position: fixed;
          width: 100%;
          top: 0px;
      }
      .area{
          width: 720px
          margin: 0 auto;
      }
      .menu{
          float: right;
          padding: 10px 100px;
      }
      .logo{
          float: left;
      }
      .yellow{
          color: gold;
      }
      a{
          color: white;
          text-decoration: none;
          padding: 5px 10px;
      }
      a:link{
          color: white;
      }
      a:visited{
          color: white;
      }
      a:hover{
          color: black;
          background-color: white;
      }

      .area-principal{
          width: 720px;
          margin: 55px auto 10px auto;
      }
      .postagem{
          margin: 10px;
          background-color: darkgray;
          margin-bottom: 10px;
      }
      h2{
          color: gold;
          text-decoration: none;
      }
      .data-postagem{
          display: block;
          font-size: 14px;
          border-bottom: 1px solid #f4f4f4;
          padding-bottom: 10px;
          margin-bottom: 10px;
      }
      .img-postagem{
          float: left;
          margin: 0px 10px 10px 0px;
      }
      p{
          text-align: justify;
          padding: 10px;
      }
       
    • By Rafael_Ferreira
      Datetimepicker do Bootstrap fica português só fora da internet testando no Wampserver passando para um domínio o datetimepicker funciona só que fica em inglês.
      Código:
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="css/bootstrap.min.css">
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>

              <link href="css/bootstrap-combined.min.css" rel="stylesheet"/>
      <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>


      <script src="js/bootstrap-datetimepicker.min.js"></script> 
      <script src="js/bootstrap-datetimepicker.pt-BR"></script>
      <body>
      </head>
      <div class="container">
      <div class="row justify-content-center">
      <table class="table">
      <thead>

      <th>&nbsp;ID_Cliente</th>
      <th>Preço</th>

      <th>Quantidade</th>
      <th>Total dos Serviços</th>
      <th>Forma de Pagamento</th>
      <th>Data</th>
      <th Colspan="9">Ação

      </th>
      </thead>

      <button type="button" class="btn btn-dark">Cliente</button>
      <button type="button" class="btn btn-secondary">Caixa</button>
      <button type="button" class="btn btn-primary">Relatorio1</button>
      <button type="button" class="btn btn-success">Relatorio2</button>

      <tbody>
        <tr>
            <td>&nbsp;1</td>
            <td>148,00</td>
        <td>1,0</td>
        <td>188,0</td>
        <td>Dinheiro a vista</td>
        <td>2011-08-19-13:45:00</td>


      <td>
      <button type="button" class="btn btn-info">Edit</button>
      <button type="button" class="btn btn-danger">Delete</button>
      </td>   
      </tr>
      <tr>
            <td>&nbsp;2</td>
            <td>308,00</td>
        <td>1,0</td>
        <td>399,23</td>
        <td>Débito no cartão</td>
        <td>2011-08-20-22:45:00</td>
      <td>
      <button type="button" class="btn btn-info">Edit</button>
      <button type="button" class="btn btn-danger">Delete</button>
      </td>   
      </tr>


      </table>
      </div>

      <BR>
      <BR>
      <BR>





      <div class="row justify-content-center">
      <form action="" method="POST">
      <div class="form-group row">
      <div class="col-xs-8">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">Serviços</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
          <option selected>Escolha</option>
          <option value="1">Corte</option>
          <option value="2">Hidratação</option>
          <option value="3">Coloração</option>
      <option value="4">Relaxamento</option>
      <option value="5">Progressiva</option>
      <option value="6">Escova</option>
        </select>
      </div>
      </div>
      </div>

      <div class="form-group row">
      <div class="col-xs-8">
       <label for="cod">ID_Cliente:</label>
       <input type="text" class="form-control" id="cod" aria-describedby="name" placeholder="">
      </div>
      </div>
      <div class="form-group row">
      <div class="col-xs-8">
       <label for="preco">Preço:</label>
       <input type="text" class="form-control" id="preco" aria-describedby="name" placeholder="">
      </div>
      </div>


      <div class="form-group row">
      <div class="col-xs-8">
      <label for="Quantidade">Quantidade:</label>
       <input type="text" class="form-control" id="quantidade" aria-describedby="quantidade" placeholder="">
      </div>
      </div>
      <div class="form-group row">
      <div class="col-xs-8">
      <label for="totaldeserv">Total dos Serviços:</label>
       <input type="text" class="form-control" id="totaldeserv" aria-describedby="totaldeserv" placeholder="">
      </div>
      </div>
      <div class="form-group row">
      <div class="col-xs-8">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">Forma de Pagamento:</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
          <option selected>Escolha</option>
          <option value="1">Cartão de crédito</option>
          <option value="2">Cartão de débito</option>
          <option value="3">Dinheiro</option>

        </select>
      </div>
      </div>
      </div>

      <div id="datetimepicker" class="input-append date">
            <label for="totaldeserv">Data_Horário</label>
        <input type="text"></input>
            <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
      </div>

      <div class="form-group row">
      <div class="col-xs-8">
      <button type="submit" name="save" class="btn btn-primary">Salvar</button> 
      </div>
      </div>
      </div>
      </form>
      </div>
      </div>

          <script type="text/javascript">
            $('#datetimepicker').datetimepicker({
              format: 'dd/MM/yyyy hh:mm:ss',
              language: 'pt-BR'
            });
          </script>
      </body>
      </html>
      ----------------------------------------------------------------------------------------------
      /**
       * Brazilian translation for bootstrap-datetimepicker
       * Cauan Cabral <cauan@radig.com.br>
       */
      ;(function($){
      $.fn.datetimepicker.dates['pt-BR'] = {
      days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
      daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "---", "Sáb", "Dom"],
      daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa", "Do"],
      months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
      monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
      today: "Hoje"
      };
      }(jQuery));
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.