如何製作一個<select>取其內容的大小？

在我的項目，我有以下標記：如何製作一個<select>取其內容的大小？

<div class="foo"> 
    <div class="bar"> 
     <select> 
      <option>Very looooooooooooooooooooong value</option> 
      <option>Some</option> 
      <option>other</option> 
      <option>value</option> 
     </select> 
    </div> 
</div>

要應用了以下CSS樣式：

.foo, .bar { 
    position: absolute; 
} 

.foo .bar select { 
    min-width: 100px; 
}

我在這裏的目的是使<select>需要，至少，大小的內容。

在Firefox上，它可以工作。在Chrome上，它沒有。

如果我刪除了兩個absolute定位樣式中的一個，它在封閉的<div>上有效。

這看起來像一個Chrome的錯誤，但我無法確定。

在我的情況下，這兩個父母必須有absolute定位如此刪除，不幸的是不是一個選項。你知道任何解決方法嗎？

展示此問題的jsfiddle是here。

來源

2012-08-31 ereOn

只是爲了澄清 - 你希望它成爲的大小選擇的項目，還是最長的可用值？ – PhonicUK

@ PhonicUK：最長可用值的大小。就像Firefox一樣。 – ereOn

如果指定的的.bar它將使一些靈活性See here

另外，您可以刪除位置的寬度：從的.bar see here

來源

2012-08-31 09:28:37

其實，它似乎工作，如果我在.foo上設置一個，這對我來說是完美的:)謝謝。 – ereOn

的min-width絕對是問題。刪除它，並將在Firefox和Chrome上運行。

來源

2012-08-31 09:31:06 albertedevigo

將min-width設置爲自動。我在Chrome上測試了你的小提琴，它工作。

來源

2012-08-31 09:31:49 utsikko

刪除

foo .bar select { 
min-width: 100px; 
}

你會得到你output.Its不require.No需要給任何寬度，而其固定或自動

來源

2012-08-31 09:40:21 supersaiyan

如何製作一個<select>取其內容的大小？

回答

相關問題