[解決済み] Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image
Question
I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:
list-style-image
And then giving it a URL.
However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.
Can this be done or am I forced to make it a graphic first?
How to solved?
The following is quoted from Taming Lists :
リストがあっても、箇条書きがない場合や、箇条書きの代わりに何か他の文字を使いたい場合もあるでしょう。この場合も、CSSで簡単に解決できます。ルールにlist-style: none;を追加し、LIをぶら下がりインデントで表示するようにするだけです。ルールは次のようなものになります。
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }
paddingかmarginのどちらかを0に、もう一方を1emに設定する必要があります。選択した「弾丸」によっては、この値を修正する必要があります。text-indentをマイナスにすると、最初の行がその分左に移動し、ぶら下がりインデントが発生します。
HTML には標準的な UL が含まれますが、リスト項目のコンテンツの前にある弾丸の代わりに使用したい文字や HTML 実体が含まれます。この例では、右ダブルアングル引用符の""を使用します。".
<ブロッククオート" 項目 1
" 項目2
" 項目3
" 項目4
" 私たちが作るアイテム5
が少し長くなるように
を折り返します。
関連
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] 幅・高さをピクセル単位からパーセント単位で設定する。
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] クリック可能なラベルを持つチェックボックスを作成するには?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] CSS3のborder-radiusプロパティとborder-collapse:collapseが混ざらないのですが。border-radiusを使用して、角を丸くした折りたたみテーブルを作成するにはどうすればよいですか?
-
[解決済み】MVC4 StyleBundleで画像が解決されない件
-
[解決済み】CSSでテキストを挿入する方法
-
[解決済み] 箇条書きに Font Awesome アイコンを使用し、単一のリストアイテム要素で使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] XHTMLの自己完結型タグを除くオープンタグにマッチするRegEx
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] div内の画像の下に余分なスペースがある