JQuery mobiele zij aan zij ingangen

Ik wil naast elkaar (horizontaal) twee ingangen plaatsen met jQuery mobiel

Ik heb het op deze manier geprobeerd maar lijkt niet te werken:

<div class="containerButtons ui-grid-a">
                <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;">
                     <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="fieldcontain"  class="ui-block-b" style=" width: 50% !important;">
                     <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
                    </div>

Ik heb deze methode gebruikt om naast elkaar 2 knoppen uit te lijnen en het werkt, maar ik kan die niet uitlijnen met ingangen

0
Wanneer ik deze problemen tegenkom, begin ik elementen tot hun absoluutste te verkleinen om er zeker van te zijn dat ze inpakken. De meeste elementen hebben een opvulling/marge. Zaken als de afstand tussen het label en de invoer moeten dus ook worden verwijderd, omdat dit van invloed is op de lay-out. Verwijder zelfs de labels voor een test en plaats ze dan terug .. Als ze dit niet verpakken, moet er een float of andere methode worden gebruikt
toegevoegd de auteur Mayhem, de bron

7 antwoord

Gebruik float: left -

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

<div class="containerButtons ui-grid-a">
                <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;float:left">
                     <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="fieldcontain"  class="ui-block-b" style=" width: 50% !important;float:left">
                     <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
  <div style="clear:both;"></div>
                    </div>
</div> </div>

Ik hoop dat het je zal helpen.

1
toegevoegd
Nog steeds in twee afzonderlijke lijnen, links gedreven, maar de ene boven de andere
toegevoegd de auteur Mattew Trincanati, de bron

Gebruik float: left -

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

<div class="containerButtons ui-grid-a">
                <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;float:left">
                     <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="fieldcontain"  class="ui-block-b" style=" width: 50% !important;float:left">
                     <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
  <div style="clear:both;"></div>
                    </div>
</div> </div>

Ik hoop dat het je zal helpen.

1
toegevoegd
Nog steeds in twee afzonderlijke lijnen, links gedreven, maar de ene boven de andere
toegevoegd de auteur Mattew Trincanati, de bron

Gewijzigd met behulp van float: links voor beide div's, wat alles is wat ik nodig heb om het te overschrijven.

Stuurde ook de ingangen naar een nieuwe regel wat mij betreft kan dit het lezen en bewerken vergemakkelijken.

<div class="containerButtons ui-grid-a">
    <div data-role="fieldcontain" class="ui-block-a" style="float:left; width: 50% !important;">
        
        <input type="date" data-date-format="dd-mm-yy" name="start" class="dataAControl" id="start" />
    </div>

    <div data-role="fieldcontain"  class="ui-block-b" style="float:left; width: 50% !important;">
        
        <input type="date" name="end" class="dataAControl" id="end" />
    </div>
</div>

Oh and a fiddle.. http://jsfiddle.net/xfn244nb/1/

If that fails, which tested for me does not.. You can always use display:inline-block; as this has always been my preferred method. eg Advantages of using display:inline-block vs float:left in CSS

0
toegevoegd
Omdat ik jQuery-mobiel niet gebruik. Er kan een standaardkenmerk/-stijl zijn om dit te doen zonder dat dit een stijlverandering versus een klasse tot gevolg heeft. Maar laat dit hier staan ​​omdat nog steeds een van de veelvoorkomende snelle oplossingen wordt uitgelegd
toegevoegd de auteur Mayhem, de bron

Gewijzigd met behulp van float: links voor beide div's, wat alles is wat ik nodig heb om het te overschrijven.

Stuurde ook de ingangen naar een nieuwe regel wat mij betreft kan dit het lezen en bewerken vergemakkelijken.

<div class="containerButtons ui-grid-a">
    <div data-role="fieldcontain" class="ui-block-a" style="float:left; width: 50% !important;">
        
        <input type="date" data-date-format="dd-mm-yy" name="start" class="dataAControl" id="start" />
    </div>

    <div data-role="fieldcontain"  class="ui-block-b" style="float:left; width: 50% !important;">
        
        <input type="date" name="end" class="dataAControl" id="end" />
    </div>
</div>

Oh and a fiddle.. http://jsfiddle.net/xfn244nb/1/

If that fails, which tested for me does not.. You can always use display:inline-block; as this has always been my preferred method. eg Advantages of using display:inline-block vs float:left in CSS

0
toegevoegd
Omdat ik jQuery-mobiel niet gebruik. Er kan een standaardkenmerk/-stijl zijn om dit te doen zonder dat dit een stijlverandering versus een klasse tot gevolg heeft. Maar laat dit hier staan ​​omdat nog steeds een van de veelvoorkomende snelle oplossingen wordt uitgelegd
toegevoegd de auteur Mayhem, de bron

I've found the problem, the "inside" div datarole had to be content

<div class="containerButtons ui-grid-a">
                <div data-role="content" class="ui-block-a" style=" width: 50% !important;">
                     <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="content"  class="ui-block-b" style=" width: 50% !important;">
                     <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
                    </div>
0
toegevoegd

Ik denk dat de div-container een padding heeft, dus probeer deze code:

<div class="containerButtons ui-grid-a"
    style="padding:0">
    <div data-role="fieldcontain"
        class="ui-block-a"
        style=" width: 50% !important;float:left">
        
        <input type="date"
            data-date-format="dd-mm-yy"
            name="start"
            class="dataAControl" id="start">
    </div>

    <div data-role="fieldcontain"
        class="ui-block-b"
        style=" width: 50% !important;float:left">
        
        <input type="date"
            name="end"
            class="dataAControl"
            id="end" >
    </div>

    <!-- don't forget clearing float -->
    <div style="clear:both;"></div>
</div>
0
toegevoegd

Ik denk dat de div-container een padding heeft, dus probeer deze code:

<div class="containerButtons ui-grid-a"
    style="padding:0">
    <div data-role="fieldcontain"
        class="ui-block-a"
        style=" width: 50% !important;float:left">
        
        <input type="date"
            data-date-format="dd-mm-yy"
            name="start"
            class="dataAControl" id="start">
    </div>

    <div data-role="fieldcontain"
        class="ui-block-b"
        style=" width: 50% !important;float:left">
        
        <input type="date"
            name="end"
            class="dataAControl"
            id="end" >
    </div>

    <!-- don't forget clearing float -->
    <div style="clear:both;"></div>
</div>
0
toegevoegd