選項中選擇不匹配的元素寬度

-5

正如你所看到的 - 曾經點擊選擇菜單 - 選項是重疊的。選項中選擇不匹配的元素寬度

我不知道是否有人偶然發現了這種行爲有什麼能爲選項寬度相匹配的寬度選擇 - 因爲在我的項目出現問題，我沒有加入小提琴，我可以」 t股。所以我需要更一般的方法。

.select { 
    width: 100%; 
    border-radius: 5px; 
    border: 1px solid #dcdcdc; 
    font-size: 12px; 
}

來源

2017-08-31 RoyBarOn

您沒有分享你的項目，相反：創建您的問題[MCVE] –

你保持相同的文字中選擇不同的值。共享html/ – Amit

添加寬度選項不僅可以選擇。 –

我在這裏猜測了一下你的問題具有有限的信息，但我相信問題是，你必須使用不同的字體大小爲select併爲option。從截圖中肯定可以看出您使用的是不同的字體大小。

考慮以下代碼：

.select { 
 
    border-radius: 5px; 
 
    border: 1px solid #dcdcdc; 
 
    font-size: 12px; 
 
} 
 

 
.select option { 
 
    font-size: 16px; 
 
}

<select class="select"> 
 
    <option selected>i like burger and fries</option> 
 
    <option>i like burger and fries</option> 
 
    <option>i like burger and fries</option> 
 
</select>

正如你可以看到它產生了同樣的問題。你需要檢查你的代碼和CSS，以確保你沒有使用不同的字體大小。如果字體大小是相同的，那麼選項應該很好地排列。

的解決上述代碼是簡單地從CSS除去.select option定義。

注意，還可以有可能導致大小不匹配不只是字體大小等屬性。例如，字體樣式，間距，填充等。您基本上需要確保您不要以不同方式設置選項，只需讓它們從select中繼承即可。

來源

2017-08-31 09:10:20 musefan

musefan - 感謝 - 在我的情況下，有一些額外的空間，以文本的右...所以我已經試過paddng和利潤= 0像素重要 - 但一切都沒有改變 – RoyBarOn

@RoyBarOn：好吧那麼這將是一個不同財產代替。除非您可以提供複製問題的HTML和CSS，否則我們無能爲力。您是唯一可以在一分鐘內訪問源代碼的人，因此您是唯一能夠識別問題的人。 – musefan

謝謝 - 我會做一些更testings ..如果這個問題是不是不能被輕易解決了這裏 - 那麼它可能是一個局部問題...其他的CSS設置生成....感謝任何方式 – RoyBarOn

Solution :

select { 
 
    width: 100%; 
 
    border-radius: 5px; 
 
    border: 1px solid #dcdcdc; 
 
    font-size: 12px; 
 
}

<select> 
 
    <option tabindex='-1'>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
</select>

來源

2017-08-31 09:11:46

我不要認爲這是正確的，因爲你沒有改變任何東西。 OP顯然有一個包含元素，它限制了選擇元素的寬度 – musefan

Maulik Bhatt - 感謝您的時間 - 我會做更多的檢查。 – RoyBarOn

選項中選擇不匹配的元素寬度

回答

相關問題