<div class="snippet-code"> Get ready. This is not a "> <div class="snippet-code"> Get ready. This is not a "> <div class="snippet-code"> Get ready. This is not a " />

ulからパディングを削除するときにどのように水平方向に弾丸を左に揃えるには？

次のようなコードがあります。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

Get ready.



    
  
  • This
    • 
  
  • is
    • 
  
  • not
    • 
  
  • a
    • 
  
  • list.
    •
</div> </div>

箇条書きがulの前に来るテキストと水平に並ぶように、ulの左パディングを取り除きたいです。残念ながら、ulの左パディングを0pxに設定すると、liの内容はそれらの上にあるものと整列し、箇条書きは左に突き出ます。 ulのパディングを現在のブラウザで機能する値に手動で設定できますが、すべてのブラウザで機能しない可能性があります。

0
追加された 編集された
ビュー: 26
源
ro nl ru fr es pt de hi bn ar
list-style-position：inside;
追加された 著者 Temani Afif, 源
list-style-position：inside;
追加された 著者 Temani Afif, 源
私はその複製を探しています、私は以前にそれを見たことはかなり確実です。
追加された 著者 Temani Afif, 源
私はその複製を探しています、私は以前にそれを見たことはかなり確実です。
追加された 著者 Temani Afif, 源
@TemaniAfifありがとう、これで私の問題は解決しました。あなたが簡単な答えを書きたいのなら、私はそれを受け入れます。
追加された 著者 GuitarExtended, 源
あなたは私達にあなたの期待される結果を示すことができます
追加された 著者 user123, 源

6 答え

私はあなたが必要とするものを達成することを望みます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

ul{
padding: 0;
}
ul li{
  display: inline;
}
Get ready.



    
  
  • This
    • 
  
  • is
    • 
  
  • not
    • 
  
  • a
    • 
  
  • list.
    •
</div> </div>

3
追加された
源

私はあなたが必要とするものを達成することを望みます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

ul{
padding: 0;
}
ul li{
  display: inline;
}
Get ready.



    
  
  • This
    • 
  
  • is
    • 
  
  • not
    • 
  
  • a
    • 
  
  • list.
    •
</div> </div>

3
追加された
源 
ul li{
    display: inline-block;
    padding: 20px
}

これでうまくいくはずです。

3
追加された
源
あなたは好きなようにパディング値を変更することができます...
追加された 著者 DES PRO, 源

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

Get ready.



     
  • This
    • 

  • is
    • 
  
  • not
    • 
  
  • a
    • 
  
  • list.
    • 


</div>
</div> </div>

3
追加された
源
お役に立てれば！
追加された 著者 alias-3, 源

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

Get ready.



     
  • This
    • 

  • is
    • 
  
  • not
    • 
  
  • a
    • 
  
  • list.
    • 


</div>
</div> </div>

3
追加された
源
お役に立てれば！
追加された 著者 alias-3, 源

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

ul {
  padding-left: 0;
  display: flex;
  list-style-position: inside;
}

ul li {
  margin-right: 30px;
}
Get ready.



    
  
  • This
    • 
  
  • is
    • 
  
  • not
    • 
  
  • a
    • 
  
  • list.
    •
</div> </div>

2
追加された
源