元素的自動調整組合

我有很多元素需要在同一行對齊，除了第一個標籤，我真的需要選擇寬度以適應窗口大小（調整大小）。例如。 enter image description here 元素的自動調整組合

我無法更改HTML結構，因爲它是由框架自動生成的，但我可以更改CSS代碼，甚至可以在html中添加一些類。

<div class="input-group"> 
    <span> 
     <span class="inline">&nbsp;</span> 
     <label class="block">Pets</label> 
     <span class="inline"> 
      <select> 
       <option value="&nbsp;">&nbsp;</option> 
       <option value="Dog">Dog</option> 
       <option value="Cat">Cat</option> 
      </select> 
     </span> 
     <span class="inline">*</span> 
     <span class="inline"> 
      <span >&nbsp;</span> 
     </span> 
    </span> 
    <span> 
     <span> 
      <button> 
       <span>Configure</span> 
      </button> 
     </span> 
     <span >*</span> 
     <span > 
      <span >&nbsp;</span> 
     </span> 
    </span> 
</div>

我tryed很多事情與元件檢查，尤其是與表和表單元格值的顯示屬性，但我不能得到在相同的線路和元件具有自動調整大小寬度的選擇。我不能將第一個跨度與同一行中的選擇對齊...

.input-group { 
    display: table; 
    width:100%; 
    background-color: yellow; 
} 
.inline 
{ 
    display: table-cell; 
    height: 33px; 
} 
.block{ 
    display: block; 
}

你能幫我一下嗎？非常感謝！小提琴：http://jsfiddle.net/gal007/29qstLq8/1/

來源

2014-11-03 gal007

是這樣的嗎？ ---------------> [Fiddle]（http://jsfiddle.net/chipChocolate/29qstLq8/10/）。 – 2014-11-03 18:53:12

不，看看我添加的圖片：http://jsfiddle.net/gal007/29qstLq8/11/ – gal007 2014-11-03 19:03:21

這個想法是讓標籤分開。當你調整窗口的大小時，調整組件的大小，但將它們放在同一行中 – gal007 2014-11-03 19:04:24

這是我到目前爲止已經得到最接近。我的代碼使用position: relative;和position: absolute;來實現您正在尋找的內容。

http://jsfiddle.net/29qstLq8/14/

來源

2014-11-03 17:38:57 mikelt21

但是第一個跨度（沒有內容）仍與select處於不同的行，並且我需要它們相同。並且選擇不是自動調整它的值，以適應窗口寬度 – gal007 2014-11-03 17:51:47

，因此您希望''span class =「inline」> '與您的選擇範圍在同一行？我更新了我的小提琴來處理基於窗口寬度的選擇框的自動調整 – mikelt21 2014-11-03 17:58:47

不，我需要標籤和第一行中的第一個空白跨度。在第二個和所有其他的選擇，以適應第2行的所有自由空間。我把另一個類名在HTML中，所以你可以更好地理解：http://jsfiddle.net/gal007/29qstLq8/7/ – gal007 2014-11-03 18:04:31

-1

你試過漂浮而不是表格單元格嗎？

.inline 
{ 
    float:left; 
    height: 33px; 
}

http://jsfiddle.net/p7c97xg2/

來源

2014-11-03 17:29:57

但是您更改了元素順序 – gal007 2014-11-03 17:56:27

我在說明中添加了一個圖片 – gal007 2014-11-03 17:57:40

相反表格單元格的，你應該使用display: inline-block。這使得一切都在一條線上，如果有足夠的空間：

http://jsfiddle.net/ianhazzard/29qstLq8/8/

來源

2014-11-03 17:33:48

那麼...您會得到和我一樣的結果。真正的挑戰是我需要調整選擇元素的寬度並將標籤與第一個空白區域對齊。 – gal007 2014-11-03 18:00:30

我在[this fiddle]中調整了'

元素的自動調整組合

回答