1

スタイル クラスが関連付けられた ul 内に li 要素のリストがあります (以下を参照)。私が望むのは、すべてのリスト項目がページの左端にあることです。ul と li の両方に境界線を引くと、li 項目が不可解に正確に 40px だけインデントされていることがわかります。

両方の要素で margin-left: 0px を試しました。 list-style:none; を試しました。これは、弾丸をなくし、残ったすべてを破壊不可能な 40px のマージンまでスライドさせるのに役立ちます。

試行錯誤の結果、li でこれを行うと次のようになると判断しました。

left: -40px;
position: relative;

望ましい結果が得られますが、マージンは各liの右側/末尾にポップするだけで、視覚的にはそれほど面倒ではありませんが、それでもひどいハックです。消えないようにする方法はあるのでしょうか？

私のスタイルコードは次のようになります。

ul.selectorlist
{
    list-style: none;
    padding: none;
    margin: 0px;

    border-width: 1px;
    border-style: solid;
    border-color: white;
}


li.channel
{
//  left: -40px; // <- Does the trick but COME ON, REALLY?!

    width: 100%;
    background-colour: black;
    font-family:georgia;
    font-size:18px;
    padding: 0px;
    margin: 0 0 0 0;

    border-width: 1px;
    border-style: solid;
    border-color: white;
}

ノート：

私も遊んでみました：

list-style-position: inside / outside;

実際には、40px ラインの左側と右側にある li の箇条書きがポップされます。

4

2 に答える 2

2

(FireFox 11 で) 少し実験したところ、リストのデフォルト レイアウトには 40 ピクセルの左パディングが含まれていることがわかりました。

追加

padding:0;

あなたの<ul>不思議なギャップが消えるはずです。ただし、これは弾丸の位置に関して望ましくない結果をもたらす可能性があります。特定のレイアウト要件に応じて、箇条書きを削除するか、に設定list-style-positionすることは、両方とも可能な解決策です。inside

このパディングは<ul>要素上にあることに注意してください。境界線を追加すると、視覚的には<li>. これが、Firebug や Chrome や IE に含まれる開発ツールが非常に便利な理由の 1 つです。あらゆる要素のボックス モデルを簡単に確認できます。

于 2012-04-12T18:28:42.850 に答える
0

リストスタイルの位置をいじってみましたか：

list-style-position: inside;

また

list-style-position: outside;
于 2012-04-12T18:06:08.193 に答える