モバイルの箇条書きリスト用のインデント

モバイルデバイスで、インデントされたコンテンツの右側の余白パディングを削除する方法はありますか?

狭い画面では、ミラーリングされたインデントにより、横方向の画面スペースが数文字分しか確保できなくなります。テキストの折り返しが乱れます!

私はテレビで CSS の専門家として出演しているわけでも、昨晩ホリデイ・インに宿泊したわけでもありません。

でも、モバイル用の CSS で ul や li のパディングを変更してみるのはどうでしょうか?padding-left を % や vw、あるいは単に px を減らすだけでもいいかもしれません。

おそらく、このコミュニティの誰かなら寝ながらでも答えられるような質問かもしれません。これはみんなにとって良い機会になるかもしれませんし、あなたが最初に気づいてくれたのかもしれません。

あるいは、そうでもないかもしれません :thinking:

デフォルトは以下の通りです。

.cooked ul {
    margin: 0;
    padding-left: 40px;
}

Mobile CSS の padding-left の値を変更して、インデントを小さくしてください。下の画像の後は以下のようになります。

.cooked ul {
    margin: 0;
    padding-left: 15px;
}

ご提案ありがとうございます。インデックスのステップを 4 から 2 に減らすことで、ある程度改善されます。しかし、私は 側に追加されるミラーリングされた padding の方がより懸念しています。モバイル端末では、その padding を完全に削除するのが最善です。

その問題が発生しているページへのリンクを貼るか、投稿をここにコピーしてもらえますか?そのスクリーンショットだけでは何が起きているか判断しにくいです。私の例では右側の余白のインデントはありません。


モバイルでどのように表示されるか確認したい場合は、こちらがその投稿です。

  • 単語や数語より長いリスト項目
    • 単語や数語より長いリスト項目
      • 単語や数語より長いリスト項目
        • 単語や数語より長いリスト項目
          • 単語や数語より長いリスト項目
            • 単語や数語より長いリスト項目

ありがとうございます!これは比較的新しい Discourse サイトです。オープンソースの系譜学プロジェクト「Gramps」の MailLists を廃止できるよう、現在実験を進めています。そのため、学習曲線の急斜面にいる状態です。

スクリーンショットはバージョン 4 の Android アプリからのものです。同じ問題は Chrome でも再現します。

投稿へのリンクはこちらです:
https://gramps.discourse.group/t/genealogical-numbering-systems/230/5

このクラスから padding-right を削除してみてください

.cooked ul[dir="ltr"] {
    padding-right: 40px;
    padding-left: 40px;
}

padding-left を減らすこともできます

.cooked ul[dir="ltr"] {
    //padding-right: 40px;
    padding-left: 15px;
}

ウェブマスターが調整を行いました。今ははるかに良くなりました。

ありがとうございます!

あなたのウェブマスターの対応はあまりうまくいかなかったようですね。右側にまだ大きな空白が残っているようです。
左側のパディングは減らしたようですが、右側のパディングはそのままにしています。


@smrtey さんの解決策が正解です。右側のパディングを完全に削除すべきです。
おそらくこの右側のパディングは、右から左へ書く言語(RTL)向けの適切なパディングを確保するために設定されたものだと思いますが、左から右へ書く言語(LTR)ではここに置く理由はありません。

ありがとうございます!

いくつか試行錯誤した結果、左右に15pxのインデントをミラーリングする設定が気に入りました。

右側のマージンを完全にコメントアウトしても、変化がありませんでした!(おそらく、カスケード値の問題でしょう。)

こちらに、異なる試行時のスクリーンショットを含むローカルディスカッションへのリンクがあります。

変ですね。
以下のコードを試しましたか?

.cooked ul[dir="ltr"] {
    padding-right: 0;
    padding-left: 15px;
}

:white_question_mark:

もし動作しない場合、他のルールによって上書きされている可能性があります。より具体的なセレクターを試してみてください。

.topic-post .cooked ul[dir="ltr"] {
    padding-right: 0;
    padding-left: 15px;
}

いいえ、明示的なゼロ値を試したことはありません。パラメータ渡しの場面でゼロが特別扱いされすぎることは、以前から問題だと主張していました。そのため、実験的な診断には不適切な選択肢になりがちです。

そこで 15px に決定し、それ以上の実験を行う必要を感じませんでした。その値は私たちの要件を満たしていたのです。

ただし、コメントアウトしてもその問題が解決しなかったのは確かに奇妙でしたね。ありがとうございました!

既存の padding-right: 40px; をコメントアウトしていれば動作したでしょうが、新しいルールとして単に //padding-right: 40px; と記述しても全く効果はありません。

既存の padding-right: 40px; を無効にする正しい方法は、明示的に padding-right: 0; と記述して新しいルールでこの前の値を上書きすることです。:+1:t6: