1

簡単な作業のように思えたことが、今では何時間もの不可解な作業になっています。私は を持っていますdropdownlist (@html.dropdownlistfor(model))。これを介してスタイルを設定しますcss ( new { @class = "searchDropDownList" } )

問題は、標準のドロップダウン リストが短すぎる (高さ) ことですが、高さを追加してボックスを大きくすると、選択した項目が中央に配置されなくなります。vertical-align: middle選択したアイテムでは機能しません。

ボックスの上部にパディングを追加すると、テキストは希望どおりに下に移動しますが、テキスト ボックスにカーソルを合わせると、選択矢印も下に移動するため、選択矢印が曲がっていることがわかります。

写真を見る:

  • ファイアフォックス:

ここに画像の説明を入力

  • クロム:

ここに画像の説明を入力

テキストのみを下げる方法を知っている人はいますか？

編集: 現在の css:

.searchDropDownList {
  display: inline;   
  width: 114px;
  height: 26px;
  float: left;
  font-size: 14px;
  margin: 4px auto auto 2px;
  text-align: left;
  vertical-align: middle;      
  padding-left: 2px;
  padding-top: auto;
  line-height: 10px; 
}

を に変更するpadding-top: auto;と3px、上記の画像が表示されます。

4

0 に答える 0