コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > css：liのリストスタイルのドットとテキストが中央に配置されない問題の解決策

css：liのリストスタイルのドットとテキストが中央に配置されない問題の解決策

黄舟
リリース： 2017-06-29 09:32:16
オリジナル
8122 人が閲覧しました

liのリスト風小さな点と文字が中央に配置されていませんか？

css：liのリストスタイルのドットとテキストが中央に配置されない問題の解決策

<ul>
    <li><a>我们开始</a></li>
    <li><a2016</a></li></ul>.ul li{
   list-style:disc inside;}
ログイン後にコピー

ドットとテキストが中央に配置されていないように感じます（ドットが少し下にあります）中央に配置する方法はありますか？ 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo</title></head><style type="text/css">
    *{padding:0; margin:0; list-style:none;}    
    .list{ width:600px; margin:10px auto;}    
    .list li:before{ 
    content:&#39;&#39;; 
    width:4px; 
    height:4px; 
    border-radius:50%; 
    background:#000; 
    display:inline-block; 
    margin-right:5px; 
    vertical-align:middle; 
    margin-top:-3px;}
    </style>
    <body>
    <ul class="list">
        <li>呵呵!</li>
        <li>别说话吻我</li>
        <li>小火车怎么这么污?</li>
    </ul></body></html>
ログイン後にコピー

通常、この状況では、 before 疑似クラスを使用して自分で作成します

ul

のリストスタイルを削除して試してみると、spanを使用して制御するのが簡単になります。 line-height 、現在の li; の高さと同じ

以上がcss：liのリストスタイルのドットとテキストが中央に配置されない問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：CSS の list-style:none が機能しないのはなぜですか? 次の記事：CSS: list-style は list 属性を変更して li タグのスタイルを制御します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
キャンバスの *2* 高さの値を取得しますか? このキャンバスの 2 つの高さの値を取得しようとしています。 <canvaswidth="886"height="792"style=...
から 2024-04-05 09:32:33
0
1
1360
ツールヒントのリンクとボタンが機能しない ツールヒント内からクリック イベントをトリガーしようとしています。クリックイベントを含むボタンを配置しましたが、機能しません。ツールチップ内に外部リンクを追加してみました。それもう...
から 2024-04-04 22:01:46
0
1
1352
サブルートのネストされたリソースのコンポーネントを編集する ネストされたリソースでカスタム ルーティングを使用しようとしています。 Request はデータベース上のテーブルの「実際の」リソースですが、Participants は requ...
から 2024-04-04 20:05:35
0
1
368
JavaScriptを使用してプロパティを更新し、配列オブジェクトでプロパティ値を連続した順序で結果を取得する方法 オブジェクトリストの配列があり、パラメータridとrorderが渡されます。 ->1. Rid がリスト内の ID と同じ場合、itemorder> の値を rorde...
から 2024-04-04 13:32:46
0
1
382
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート