グループGlyphiconと一緒にテキスト

私が一緒のグループにダニと名前をしたいと思います

ので、名前は新しい行になった場合ので、ダニとフルネームを行うことグループGlyphiconと一緒にテキスト

例えば

<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

私はスパンの中にテキストを配置した場合、私は

https://jsfiddle.net/s7mtzt5f/

出典

2016-10-11 sw2020

ウム.. div要素でそれらをラップ？「
」を使用します。制限や何かがありますか？ – Leeish

スパンに配置すると余分なスペースが追加されます。私はそれらを1行に入れて、別の行に移動したいときは – sw2020

これらはグリフを表示するためにブートストラップを使ってスタイルされています。それはスタイリングで駄目です。彼らは空であるはずです。 'aria-hidden =" true "という言葉は、画面の読者が無視するという意味ではなく、コンテンツをそこに置くことも悪いことです。 – Leeish

<span>に各グループをラップし、white-space:nowrap CSSスタイルを追加する必要があります。

<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>

更新： bradlis7ブートストラップは、上記と同じことを行いtext-nowrapクラスを持っていることを指摘しました。コードをより簡潔にし、ブートストラップに準拠させるには、間違いなくtext-nowrapを使用する必要があります。このようにそれを使用します。

<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>

出典

2016-10-11 18:42:48

ありがとうございました – sw2020

ブートストラップには 'text-nowrap'というクラスがあります'white-space：nowrap'よりも少し簡潔です。 – bradlis7

@ bradlis7素晴らしい感謝、私はそれを認識しませんでした。私は自分の答えを更新しました。 –

<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/>

どちらか1 O余分なスペースを得るように見えますこれらはうまくいくはずです。

出典

2016-10-11 18:29:31 Leeish

私はできるだけ多くの行を1行に入れたいだけで、改行を強制するのではなく、新しい行に移動します。 – sw2020

多分この1のようなものを探しています。

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>

出典

2016-10-11 18:46:02

これは、サイト上のすべてのスパンに影響を及ぼすような問題を引き起こす可能性があります。私はあなたの答えのためにクラスのおかげでインラインフレックスを配置します。 – sw2020

@ sw2020はいいいねえ。私はあなたに例を挙げます。 [https://jsfiddle.net/tjbaezid/bvzcu3ba/1/] –

グループGlyphiconと一緒にテキスト

答えて

関連する問題