Kalan alanı doldurmak için bir kutu seçin

Question

Formumda, aynı satırdaki düğmeyi göstermek için yeterli alan dışında seçme kutumun satırda kalmasını sağlamaya çalışıyorum.

Duyarlı bir tasarımın ardından, sayfayı yeniden boyutlandırdığımdan, seçim kutusunun boyutuyla birlikte, bu boyutun da dikkate alınması için yeniden boyutlandırılması gerekir.

Seçimde yüzdeyi ayarlayabilirim, ancak yukarı ve aşağı gittikçe bazen büyük bir boşlukla sonlanır veya düğme yeni bir satıra gider.

html 

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
     <div class="col-xs-9"> 
      <select id="droplist"> 
       <option>Value 1</option> 
       <option>Value 2</option> 
      </select> 
      <button class="btn btn-primary">Action!</button> 
     </div> 
    </div> 
</form> 

css 
select { 
    width: 80%; 
} 

seçme ve aynı satırda düğmeye ve sadece sayfayla boyutlandırır seçme ikisine birden sahip bir yolu var mı?

fiddle; http://jsfiddle.net/sJT6C/

Answer 1

Eğer sabit genişliğe sahip düğmesi ister ise, gelişmiş CSS düzenleri (esnemeler ya da ızgara, now experimental in Firefox) kullanın veya HTML biçimlendirmesi değiştirebilir ve aşağıdaki gibi float CSS özelliğiyle oynayabilir.

HTML:

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
     <div class="col-xs-9"> 
      <button class="btn btn-primary">Action!</button> 
      <div class="wrapper"> 
      <select id="droplist"> 
       <option>Value 1</option> 
       <option>Value 2</option> 
      </select> 
      </div> 
     </div> 
    </div> 
</form> 

CSS: biçimlendirme olarak

JsFiddle

.wrapper { 
    margin-right: 70px; 
    margin-top: .5ex; 
} 
select { 
    width: 100%; 
} 
button { 
    float: right; 
} 

, ben select ve button takas ve sınıf wrapper ile div içinde select tamamladı. Sarıcı, genişliğini belirtmeden select ürününü mümkün olduğunca fazla alan kaplamak için gereklidir. ( width: 100% bir ambalaj malzemesi olmadan belirtilirse, düğme için oda olacaktır.)

stil .wrapper onun ana, tam genişliğine streç select anlatır. Sargı, belirtilen bir genişliğe sahip değildir, ancak bir blok eleman olarak mümkün olduğunca fazla yer almaya çalışır. Şimdi iyi davranışlı bir blok elemanı gibi davranan bir select var.

Şimdi yüzen bölüm. Sargıya, button genişlik (dolgu ve kenarlık dahil) genişliğindeki sağ kenar boşluğu verilir. Düğmenin bu boyutu asla aşmadığından emin olmak en iyisidir, ancak ben buna odaklanmadım.button'a sağa doğru yüzdürülmesi söylenir. Böylece, paketin sağ kenar boşluğu tarafından ayrılmış alanı doldurur. (Ben işaretlemesinde elemanları takas olmadıysa, düğme. Sarmalayıcı yüksekliğine göre aşağıya indiği)

Ve evet, .wrapper ait margin-top: .5ex söylemeyi unutmuşum. Başlangıçta select ve button, taban çizgilerinin hizalanmış olması için kullanılır. Hack'im bu hizalamayı bozuyor ve bu marjı düzeltmek için çok zayıf bir girişimde bulunuyor. Dikey hizalama CSS'de dar ve karmaşık bir şeydir ve burada gerçekten çözmek için yeterince önemli bulmamıştım.

Answer 2

Düğme (veya düğmeler) için değişken bir genişliğiniz varsa, Palec's answer'a eklemek için, kenar boşluğu yeterli bir çözüm olmayacaktır.Bunun yerine, taşma özniteliği ile değiştirin:

CSS:

.wrapper { 
    overflow: hidden; 
    margin-top: .5ex; 
} 
select { 
    width: 100%; 
} 
button { 
    float: right; 
} 

(orijinal cevap HTML değişmedi) düğmesi eleman seçme kutusundan önce yerleştirildiğini

JsFiddle

önemlidir . Başka bir şekilde işe yaramayacaktır (bunun nedenini belirleyemediğim halde).

Not: bu çözüm (Palec'in yaptığı gibi) ters çevrilen öğelerin sekme diziniyle sonuçlanır: düğme önce sekme, sonra seçim kutusu sekmeli.