HTML 選択要素のオプション テキストの前にスペース文字を入れるにはどうすればよいですか?
-
09-06-2019 - |
質問
ドロップダウン リストでは、リスト内のオプションの前にスペースを追加する必要があります。やっています
<select>
<option>  Sample</option>
</select>
スペースを 2 つ追加しますが、スペースは表示されません。オプションテキストの前にスペースを追加するにはどうすればよいですか?
解決
そうじゃない  
宇宙の実体?
<select>
<option> option 1</option>
<option> option 2</option>
</select>
私にとってはうまくいきます...
編集:
これを確認してみたところ、そこにありました 5月 古いブラウザではこれとの互換性の問題がありますが、ここではすべて問題なく動作しているようです。と交換したいかもしれないので、お知らせしたほうがいいと思いました。
他のヒント
あなたが欲しいと思います
または  
したがって、あなたの例の修正バージョンは次のようになります...
<select>
<option> Sample</option>
</select>
または
<select>
<option>  Sample</option>
</select>
使用 \xA0 文字列付き。これは、C# モデル データをドロップダウンにバインドするときに完璧に機能します...
SectionsList.ForEach(p => { p.Text = "\xA0\xA0Section: " + p.Text; });
Rob Cooper 氏が指摘したように、古いブラウザーには互換性の問題がいくつかあります (IE6 では実際の文字「 」が表示されます)。
これは、ASP.Net でこれを回避する方法です (VS を開いていないため、これが実際にどの文字に変換されるかはわかりません)。
Server.HtmlDecode(" ")
いくつかのことを試しましたが、私にとってうまくいったのはJavaScriptを使用することだけでした。js はエンティティについて何も知らないので、HTML エンティティではなくスペースに Unicode コードを使用していることに注意してください。
$("#project_product_parent_id option").each(function(i,option){
$option = $(option);
$option.text($option.text().replace(/─/g,'\u00A0\u00A0\u00A0'))
});
alt+space (Mac の場合) を押して、改行しないスペースを入力することもできます。Drupal は HTML エンティティをデコードするため、Drupal モジュールにこれを使用します。
CSS パディングでもこれを達成できるとほぼ確信しています。そうすれば、すべてのファイルにスペース文字がハードコーディングされることはなくなります。 <option>
タグ。
@ブライアン
CSS パディングでもこれを達成できるとほぼ確信しています。そうすれば、すべてのタグにスペース文字がハードコーディングされることはなくなります。
良い考えですが、残念ながら (誰もがよく使うブラウザ...) IE7 では動作しません :-(
以下は Firefox で動作するコードです (Op/Saf を想定しています)。
<select>
<option style="padding-left: 0px;">Blah</option>
<option style="padding-left: 5px;">Blah</option>
<option style="padding-left: 10px;">Blah</option>
<option style="padding-left: 0px;">Blah</option>
<option style="padding-left: 5px;">Blah</option>
</select>
char 255 (タイプ オルタナティブ+2+5+5 テンキーパッド上) のような等幅フォントを使用 Courier New
.
Server.HtmlDecode(" ")
私のために働いたのは唯一のものです。
それ以外の場合、chr はテキストとして出力されます。
listitem の属性としてパディングを追加しようとしましたが、影響はありませんでした。
それを試してみてもらえますか?それとも同じですか?
私も同じ問題を抱えていたので、できるだけ早くこれを修正する必要がありました。何度もグーグル検索しましたが、すぐに解決策を見つけることができませんでした。
代わりに私は独自の解決策を使用しましたが、それが適切かどうかはわかりませんが、私の場合はうまくいき、まさに私が行う必要があったものでした。
したがって、ドロップダウンに ListItem を追加し、スペースを追加したい場合は、次を使用します。
プレス オルタナティブ そして入力してください 0160
テンキー上では次のようになります。 ALT+0160
. 。スペースが追加されます。
ListItem("ALT+0160 ALT+0160 TEST", "TESTVAL")
これらの例をいくつか試してみましたが、うまくいったのは、dabobert のものとよく似た JavaScript を使用することだけでしたが、jQuery は使用せず、ごく普通のバニラ JavaScript とスペースを使用しただけでした。
for(var x = 0; x < dd.options.length; x++)
{
item = dd.options[x];
//if a line that needs indenting
item.text = ' ' + item.text; //indent
}
これはIEのみです。実はIE11。うーん。
1.商品一覧へ戻る
2.リスト内のForeachループ
3..
foreach (var item in q)
{
StringWriter myWriter = new StringWriter();
myWriter.Lable = HttpUtility.HtmlDecode(item.Label.Replace(" ", " "));
}
これは私にとっての仕事です!