Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Problema allineamento celle

  1. #1

    Problema allineamento celle

    Ciao a tutti sto avendo un problema, a dire il vero il problema me lo da solo Explorer gli altri browser visualizza bene, ho creato in css una tabella con 2 celle per metterci 2 campi unput vi posto il code:

    codice HTML:
    <style>
    .search form { display: table; border-spacing: 0; border-collapse: collapse; }
    .search form input { display: table-cell; height: 2.5em; vertical-align: middle; }
    .search form input:first-child {
        height: 2.5em;
        background-color: #B1B1B1;
        color: #000;
        padding: 0 0.3125em;
        box-sizing: border-box;
        width: 12.5em;
        transition:  0.5s background-color; -webkit-transition:  0.5s background-color;
        -moz-transition:  0.5s background-color; -o-transition:  0.5s background-color;
        -ms-transition:  0.5s background-color;
        border-radius: 5px 0 0 5px;
    }
    .search form input:first-child:focus { background-color: #FFF; }
    .search form input:last-child {
        height: 2.5em; width: 2.5em;
        background-color: #B32700;
        background-image: url(../images/icon/icon-search.png);
        background-position: center center;
        background-repeat: no-repeat;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        transition:  0.5s background-color; -webkit-transition:  0.5s background-color;
        -moz-transition:  0.5s background-color; -o-transition:  0.5s background-color;
        -ms-transition:  0.5s background-color;
    }
    .search form input:last-child:hover { background-color: #FF3700; }
    </style>
    <body>
    <div class="search">
        <form name="formSearch" method="post" action="cerca">
            <input type="text" name="search" placeholder="Cerca ...">
            <input id="btSearch" type="submit" value="">
        </form>
    </div>
    ....

    Il problema č che con Explorer non alline i 2 input ma il secondo input lo mette a capo in una seconda linea mentre tutti gli altri browser li visualizza bene.

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2011
    Messaggi
    219
    non sono sicuro che puoi mettere un display:table-cell direttamente dentro ad un display: table e non dentro ad un display: table-row ma ho una certa allergia ad usare il display:table e correlati quindi non so aiutarti

    Potresti mettere il primo input float:left con width:47% e il secondo float:right con la stessa width del primo

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.