Wie mache ich ein Leerzeichen vor der option text in einem HTML-select-element?

StackOverflow https://stackoverflow.com/questions/25752

  •  09-06-2019
  •  | 
  •  

Frage

In einem drop-down-Liste, die ich hinzufügen müssen Leerzeichen vor den Optionen in der Liste.Ich versuche

<select>
<option>&#32;&#32;Sample</option>
</select>

für das hinzufügen von zwei Bereiche, aber es zeigt keine Leerzeichen.Wie kann ich Leerzeichen einfügen, bevor Sie die option Texte?

War es hilfreich?

Lösung

Nicht &#160 die Einheit für die Fläche?

<select>
<option>&#160;option 1</option>
<option>    option 2</option>
</select>

Für mich funktioniert...

EDIT:

Nur diese überprüft, es Mai werden Kompatibilitätsprobleme mit diesem in älteren Browsern, aber alles scheint zu funktionieren gut für mich hier.Dachte nur, ich sollte Sie wissen lassen, wie Sie möchten, ersetzen Sie mit &nbsp;

Andere Tipps

Ich denke, Sie wollen &nbsp; oder &#160;

So ist eine verbesserte version von Ihrem Beispiel könnte sein...

<select>
  <option>&nbsp;&nbsp;Sample</option>
</select>

oder

<select>
  <option>&#160;&#160;Sample</option>
</select>

Verwenden \xA0 mit String.Dies Funktioniert Perfekt, während die Bindung von C# - Modell-Daten, um ein Dropdown...

  SectionsList.ForEach(p => { p.Text = "\xA0\xA0Section: " + p.Text; });

Als Rob Cooper wies darauf hin, es gibt einige Kompatibilitätsprobleme mit älteren Browsern (IE6 zeigt die tatsächlichen Buchstaben "& nbsp;"

Dies ist, wie ich es umgehen in ASP.Net (ich habe keine VS offen, so dass ich bin mir nicht sicher, was dieses Zeichen tatsächlich bekommt übersetzt):

Server.HtmlDecode("&nbsp;")

ich habe versucht, mehrere Dinge, aber das einzige, was für mich gearbeitet wurde javascript verwendet.nur bemerken, dass ich mithilfe der unicode-code für den Raum eher als die html-Entität, js doenst wissen, eine Sache über Entitäten

$("#project_product_parent_id option").each(function(i,option){
  $option = $(option);
  $option.text($option.text().replace(/─/g,'\u00A0\u00A0\u00A0'))
});

Sie können auch drücken Sie alt+Leertaste (mac) für eine non-breaking space.Ich benutze es für ein Drupal-Modul, weil Drupal Dekodieren html-Entitäten.

Ich bin fast sicher, Sie erreichen dies mit CSS-Polsterung, sowie.Dann müssen Sie nicht heiraten, um das Leerzeichen wird hart codiert in alle Ihre <option> tags.

@Brian

Ich bin fast sicher, Sie erreichen dies mit CSS-Polsterung, sowie.Dann müssen Sie nicht heiraten, um das Leerzeichen wird hart codiert in alle Ihre tags.

Gut gedacht, aber leider klappt es nicht im (jedermanns Lieblings-browser,...) IE7 :-(

Hier einige code, der in Firefox (und ich nehme 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>

Verwenden Sie einfach den char 255 (Typ Alt+2+5+5 auf der Zehnertastatur) mit einer monospace-schriftart wie Courier New.

Server.HtmlDecode("&nbsp;") ist das einzige, das für mich gearbeitet.

Anders chr gedruckt werden als text.

Ich habe versucht, die Polsterung als ein Attribut für die listitem, aber es nicht beeinflussen es.

&nbsp;

Können Sie es versucht?Oder ist es das gleiche?

Ich war auch mit dem gleichen Problem und ich war erforderlich, um dies zu beheben, so bald wie möglich.Obwohl ich googelte viel, ich war nicht in der Lage, eine rasche Lösung zu finden.

Stattdessen habe ich meine eigene Lösung, aber ich bin nicht sicher, ob es angebracht ist, funktioniert es in meinem Fall und genau das, was ich tun musste.

Also, wenn Sie fügen Sie ein Listenelement in der Dropdownliste, und Sie möchten, fügen Sie ein Leerzeichen verwenden Sie dann die folgende:-

Drücken Sie ALT und geben Sie 0160 auf der Zehnertastatur, also es sollte so etwas wie ALT+0160.Es wird ein Leerzeichen hinzuzufügen.

ListItem("ALT+0160 ALT+0160 TEST", "TESTVAL")

Ich habe versucht, einige dieser Beispiele, aber das einzige, was funktionierte, war die Verwendung von javascript, so wie dabobert, aber nicht jQuery, just plain old vanilla javascript und Räume:

for(var x = 0; x < dd.options.length; x++)
{
    item = dd.options[x];
    //if a line that needs indenting
    item.text = '     ' + item.text; //indent
}

Dies ist nur IE.IE11 in der Tat.Ugh.

1.Einzelteile Zurück zur Liste

2.Foreach-Schleife in der Liste

3..

foreach (var item in q)
{
    StringWriter myWriter = new StringWriter();

    myWriter.Lable = HttpUtility.HtmlDecode(item.Label.Replace(" ", "&nbsp;"));
}

Diese Arbeit für mich!!!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top