1. Zuhause
  2. Frage und Antwort
  3. Gruppe Glyphicon und Text zusammen

Gruppe Glyphicon und Text zusammen

2016-10-11 2 views
3

ich die Ticks zu einer Gruppe möchte und die Namen zusammen, so dass, wenn ein Name so auf eine neue Linie geht tut die Zecke und den vollständigen NamenGruppe Glyphicon und Text zusammen

z.B.

enter image description here

<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm 
 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano 
 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill 
 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle 
 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt 
 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen 
 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman 
 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk

Wenn ich den Text in der Spanne legen scheinen ich zusätzliche Abstand

https://jsfiddle.net/s7mtzt5f/

Quelle

2016-10-11 sw2020

+0

Umm .. sie in einem div Wickeln? Verwenden Sie '
'. Gibt es Einschränkungen oder etwas? – Leeish

+0

Wenn Sie sie in den Bereich einfügen, wird zusätzlicher Abstand hinzugefügt. Ich möchte sie in einer Zeile und nur auf eine andere Zeile gehen, wenn sie – sw2020

+1

haben Diese sind mit Bootstrap formatiert, um Glyphen anzuzeigen. Es stört das Styling. Sie sollen leer sein. Ganz zu schweigen von "aria-hidden =" true "" würde bedeuten, dass Screenreader sie ignorieren würden, also wäre es auch schlecht, Inhalte dort hinein zu stecken. – Leeish

Antwort

2

Sie müssen jede Gruppe in eine <span> und fügen Sie die white-space:nowrap CSS-Stil.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</span> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano</span> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill</span> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle</span> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt</span> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen</span> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman</span> 
 
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk</span>

Update: bradlis7 wies darauf hin, dass Bootstrap eine text-nowrap Klasse hat, die das gleiche wie das oben tut. Sie sollten auf jeden Fall text-nowrap verwenden, um den Code übersichtlicher und bootstrapkonformer zu machen. Verwenden Sie es wie folgt aus:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</span> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano</span> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill</span> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle</span> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt</span> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen</span> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman</span> 
 
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk</span>

Quelle

2016-10-11 18:42:48

+0

Danke funktioniert wie gewünscht – sw2020

+0

Bootstrap hat auch die Klasse 'text-nowrap', die ein ist etwas prägnanter als 'white-space: nowrap' – bradlis7

+0

@ bradlis7 super danke, das habe ich nicht bemerkt. Ich habe meine Antwort aktualisiert. –

0 
<div><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</div> 
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano<br/>

Entweder man o zu erhalten f das sollte funktionieren.

Quelle

2016-10-11 18:29:31 Leeish

+0

Ich möchte so viele wie möglich in einer Zeile und nur auf eine neue Zeile, wenn sie müssen, keine Newline zwingen Danke trotzdem – sw2020

0

sucht so etwas wie dieses vielleicht ein.

span.full-name { 
 
    display: inline-flex; 
 
}
<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    
 
</head> 
 
<body> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Nydia Dahm</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Hillary Stano</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Mikki Rudisill</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Lashonda Hardcastle</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Starr Ewalt</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Geri Groen</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Armandina Foreman</span> 
 

 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Alden Lusk</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Reka Jape</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Mikki Rudisill</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Lashonda Hardcastle</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Starr Ewalt</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Starr Ewalt</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Geri Groen</span> 
 
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Armandina Foreman</span> 
 
</body>

Quelle

2016-10-11 18:46:02

+0

Das könnte dazu führen, dass jemand Probleme hat, da es sich auf alle Bereiche einer Website auswirken würde. Ich würde den inline-flex in eine Klasse setzen, danke für deine Antwort. – sw2020

+1

@ sw2020 ja schön fangen. Ich gebe dir nur ein Beispiel. [https://jsfiddle.net/tjbaezid/bvzcu3ba/1/] –

Verwandte Themen

 Verwandte Themen