GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

[Resolvido]Subir componentes com CSS

html
css
html5
Tags: #<Tag:0x00007fb3cb5f32b0> #<Tag:0x00007fb3cb5f2f68> #<Tag:0x00007fb3cb5f2d10>

#1

Gostaria de colocar o campo de busca mas encima e ficasse dentro dessa linha preta mão não estou conseguindo.

HTML

<div class="header-fixed2">
 
        <div class="row">
             <div class="col-xs-3 col-sm-3" >
                 <img src="imagens/kalunga.JPG" style="width:180px;" class="imagem_empresa2">
             </div>
            <div class="col-xs-4 col-sm-4">
 <div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto2"><i class="fa fa-search" action="" ></i></button> </div>  
            </div>
             
            
             <div class="col-xs-5 col-sm-5"> 
            <div class="dropdown">
                <div class="dropbtn">
                    <c:choose>
                        <c:when test="${empty param.nome}">
                            <img src="imagens/pessoa2.png" alt="usuario" class="imagem_usuario"> Entre/Cadastre-se<span class="caret"></span>  
                        </c:when>    
                        <c:otherwise>
                            <p>${param.nome}</p> 
                        </c:otherwise>
                    </c:choose>
                </div>
                <div class="dropdown-content">
                    <li><a href="#"><i class="fa fa-laptop"></i> Meus Pedidos</a></li>
                    <li><a href="#"><i class="fa fa-gear"></i> Meus Dados</a></li>
                    <li><a href="#"><i class="fa fa-group"></i> Fale Conosco</a></li>
                    <li><a href="Logout"><i class="fa fa-group"></i> Sair</a></li>
                    <li><a href="#"> Não é Cadastrado?Cadastre-se</a></li>
                    <li><a href="#"><button type="button" onclick="" class="btn_entrar" >Entrar</button> </a></li>

                </div>
            </div>

           <div class="col-xs-4 col-sm-4">
                <div id="carrinho2">
                    <a href="#"><img src="imagens/carrinho2.png" class="carrinho2">()itens</a>
                </div>
            </div>

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

CSS

 .header-fixed2{
     
         background-color: white;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 999;
            width: 100%;
            display: none;
             border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            height: 74px;
           
            display: block;
        }
        
        
        .buscar_produto2{
        border: 0px solid;
        border-radius: 0px 5px 5px 0px;
        color:#C0C0C0;
        height: 33px;
        width: 40px;
        float: left;
        background-color:black;
        color:#ffffff;
    }
        .imagem_empresa2{
        
            
        }
        
        #carrinho2{

      margin-top: 20px;
 }

   #carrinho2 a{
        color:black !important;
        font-size: 12pt;
        margin-bottom: 20px;
    }

    #carrinho2 a:hover{
        color:black !important;
        font-size: 12pt;
    }

#2

Tenta ajustar ele com o >>
Exemplo…

margin-top: 5px;

Ou :

margin-top: -5px;

#3

era isso mesmo valeu