Jquery yan yana girişleri mobil

Jquery mobile kullanarak yan yana (yatay) iki girişi elden çıkarmak istiyorum

Bu şekilde denedim ama işe yaramadı:

<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>

Bu yöntemi yan yana 2 düğmeyi hizalamak için kullandım ve çalışıyor, ancak bunları girişlerle hizalayamıyorum

0
Bu meselelere rastladığımda, sarıldığından emin olmak için elemanları en küçük boyutlarına kadar küçültmeye başladım. Şey, çoğu elemanın dolgu/kenar boşluğuna sahip olmasıdır. Bu nedenle, etiket ile girdi arasındaki boşluk gibi şeyler de, düzeni etkilediğinden silinmelidir. Hatta bir test için etiketleri çıkarın ve sonra onları geri yerleştirin .. Tüm bunlarla sarılmazlarsa, O zaman bir şamandıra veya başka bir yöntem kullanılmalıdır
katma yazar Mayhem, kaynak

7 cevap

float: left kullanmalısınız -

<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>

Umarım size yardımcı olur.

1
katma
Hala iki ayrı çizgide kalıyor, yüzer kalıyor, diğeri üst üste
katma yazar Mattew Trincanati, kaynak

float: left kullanmalısınız -

<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>

Umarım size yardımcı olur.

1
katma
Hala iki ayrı çizgide kalıyor, yüzer kalıyor, diğeri üst üste
katma yazar Mattew Trincanati, kaynak

float: left kullanılarak değiştirildi, her iki div için de geçersiz kılmam gereken tek şey.

Ayrıca girişleri benim için yeni bir satıra gönderdi, bu da okumayı/düzenlemeyi kolaylaştırabilir.

<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
katma
JQuery mobile kullanmıyorum .. Bir sınıf vs bir stil değişikliği neden olmadan bunu yapmak için varsayılan bir özellik/stil olabilir .. Ama yine de ortak hızlı düzeltmelerden birini açıklayan gibi burada bırakacaktır
katma yazar Mayhem, kaynak

float: left kullanılarak değiştirildi, her iki div için de geçersiz kılmam gereken tek şey.

Ayrıca girişleri benim için yeni bir satıra gönderdi, bu da okumayı/düzenlemeyi kolaylaştırabilir.

<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
katma
JQuery mobile kullanmıyorum .. Bir sınıf vs bir stil değişikliği neden olmadan bunu yapmak için varsayılan bir özellik/stil olabilir .. Ama yine de ortak hızlı düzeltmelerden birini açıklayan gibi burada bırakacaktır
katma yazar Mayhem, kaynak

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
katma

Div kabının dolgusu olabileceğini düşünüyorum. Bu kodu deneyin:

<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
katma

Div kabının dolgusu olabileceğini düşünüyorum. Bu kodu deneyin:

<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
katma