htmlとcssの左端に線が届きます

初心者用CSSです。私は一番左側に届くようにしてみました。私のコードを実行した後、左の境界まではまだ距離があります。なぜそれが起こるのか分かりません。以下は私のhtml、cssコードと私の実行結果のスナップショットです。あなたが私を助けてくれることを願っています。ありがとう。私のコードを実行した後htmlとcssの左端に線が届きます

#strings li { 
 
    height: 1px; 
 
    width: 60%; 
 
    margin: 20px; 
 
    background: #f00; 
 
    list-style-type: none; 
 
    left:0px; 
 
    float:left; 
 
    position:relative; 
 
}

<link type="text/css" rel="stylesheet" href="code.css"> 
 

 
<body> 
 
    <ul id="strings"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
</body>

結果：

出典

2016-11-18 vkosyj

'マージンを交換してください：マージン'と20px'：20ピクセル0; ' –

ulはに割り当てられたデフォルトのパディングを持っていますそれ。 padding:0;〜ul要素で修正されます。

#strings{ 
    padding:0; 
}

あなたは、さらにマージンを減らしたい場合は、li要素の既存のマージンのスタイルを変更することができます。

#strings li { 
    height: 1px; 
    width: 60%; 
    margin: 20px 0; // this will set margin from top/bottom and set it 0 from left/right 
    background: #f00; 
    list-style-type: none; 
    left:0px; 
    float:left; 
    position:relative; 
}

Working Example

出典

2016-11-18 06:03:11 Samir

はあなたの助けのために感謝！できます！ – vkosyj

#strings li { 
    height: 1px; 
    width: 100%; 
    margin: 20px 0px; 
    background: #f00; 
    list-style-type: none; 
    left:0px; 
    float:left; 
    position:relative; 
}

出典

2016-11-18 05:41:27

私はちょうどあなたに簡潔な解決策を与えた：

#strings li { 
    height: 1px; 
    width: 60%; 
    margin: 20px 0; *// you put 0 to margin for both side margin* 
    background: #f00; 
    list-style-type: none; 
    left:0px; 
    float:left; 
    position:relative; 
}

出典

2016-11-18 05:44:09

htmlとcssの左端に線が届きます

答えて

関連する問題