3

Bom dia, estou com dificuldade de deixar o button ao lado do select ele sempre fica abaixo do campo, como posso deixar ele posicionado no lado direito do campo?

<div class="form-group">
  <label class="col-md-4 control-label" for="Selecione">SERVIÇOS :</label>
  <div class="col-md-4">
    <select name="servico_idservico" class="form-control" id="perfil_id required" >
         <option value="">Selecione</option>
                <% 
                for(Servico sl:f.listarServicosNaoVinculados()){
                %>
                <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
                <%
                }
                %>
            </select><div class="form-group">
  <label class="col-md-4 control-label" for=""></label>
  <div class="col-md-4">
    <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>
  </div>
</div>
  </div>
</div>

4 Respostas 4

0

Adiciona no seu CSS a linha display: inline-block;

Exemplo:

.form-group {
  display: inline-block;
  padding-left: 7px;
}
0

Tenta desta maneira aqui:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
 content: "";
 display: table;
 clear: both;
}
</style>
</head>
<body>
   <div class="form-group">
     <div class="row">
       <div class="column" >
          <select name="servico_idservico" class="form-control" id="perfil_id required" >
          <option value="">Selecione</option>
          <% 
          for(Servico sl:f.listarServicosNaoVinculados()){
          %>
          <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
          <%
          }
          %>
          </select>
         </div>
 <div class="column" >
           <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>
  </div>
 </div>
 </body>

fonte: https://www.w3schools.com/howto/howto_css_two_columns.asp

0

Você pode fazer assim sem mexer no CSS:

<div class="form-group">
    <label class="col-md-4 control-label" for="Selecione">SERVIÇOS :</label>
    <div class="col-md-4">
        <select name="servico_idservico" class="form-control" id="perfil_id required" >
            <option value="">Selecione</option>
            <% 
            for(Servico sl:f.listarServicosNaoVinculados()){
            %>
            <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
            <%
            }
            %>
        </select>

        <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>

    </div>
</div>

0

Você pode usa a class .d-flex do bootstrap vou deixar o exemplo abaixo. Bem provável solucionar seu problema.

<div class="form-group d-flex">
  <label class="col-md-4 control-label" for="Selecione">SERVIÇOS :</label>
  <div class="col-md-4">
    <select name="servico_idservico" class="form-control" id="perfil_id required" >
         <option value="">Selecione</option>
                <% 
                for(Servico sl:f.listarServicosNaoVinculados()){
                %>
                <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
                <%
                }
                %>
            </select><div class="form-group">
  <label class="col-md-4 control-label" for=""></label>
  <div class="col-md-4">
    <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>
  </div>
</div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .