インラインブロック要素のリストを縦方向にマージンする方法はありますか？

これはHTMLを変更することなく可能ではないかと思いますが、動的に追加される可変幅のインラインブロック要素のリストがあるとします。要素と親の間にマージンは必要ありませんが、2つの線を形成する場合は、それらの間にある程度の間隔を空けてください。私は::first-lineを試しましたが、余白に対しては機能しません。だから誰もこれを行う方法を知っていますか？インラインブロック要素のリストを縦方向にマージンする方法はありますか？

は、この例を見てみましょう：

.parent { 
 
    margin: 20px; 
 
    background: #555; 
 
    padding: 1px; 
 
} 
 
.parent p { 
 
    display: inline-block; 
 
    margin: 0; 
 
    margin-right: 5px; 
 
    padding: 0; 
 
    background: #CCC; 
 
} 
 
.parent::first-line { 
 
    margin-bottom: 10px;/* not working */ 
 
}

<div class="parent"> 
 
    <p>Lorem ipsum dolor</p> 
 
    <p>sit amet,</p> 
 
    <p>consectetur adipisicing elit.</p> 
 
    <p>Tempora,</p> 
 
    <p>numquam, reiciendis.</p> 
 
    <p>Voluptatum molestias,</p> 
 
    <p>sequi iste itaque corporis ducimus,</p> 
 
    <p>vero commodi sed fugiat</p> 
 
    <p>qui a perferendis sint,</p> 
 
    <p>magnam doloribus quidem.</p> 
 

 
</div>

出典

2016-09-28 Vandervals

です。これは、改行を検出するCSS方式がないためです。 –

このためのJSが必要です –

これは親に子供やnegative marginにmargin-topを設定することによって達成することができます。これにより、子供たちを上に引き寄せ、両者の間のスペースを取り除きます。

ブートストラップのrowとcol-作品この方法。

.parent { 
 
    margin: -18px 0; 
 
    background: #555; 
 
    padding: 1px; 
 
} 
 
.parent p { 
 
    display: inline-block; 
 
    margin: 0; 
 
    margin-right: 5px; 
 
    padding: 0; 
 
    background: #CCC; 
 
    margin-top: 10px; 
 
}

<div class="parent"> 
 
    <p>Lorem ipsum dolor</p> 
 
    <p>sit amet,</p> 
 
    <p>consectetur adipisicing elit.</p> 
 
    <p>Tempora,</p> 
 
    <p>numquam, reiciendis.</p> 
 
    <p>Voluptatum molestias,</p> 
 
    <p>sequi iste itaque corporis ducimus,</p> 
 
    <p>vero commodi sed fugiat</p> 
 
    <p>qui a perferendis sint,</p> 
 
    <p>magnam doloribus quidem.</p> 
 
    <p>sequi iste itaque corporis ducimus,</p> 
 
    <p>vero commodi sed fugiat</p> 
 
    <p>qui a perferendis sint,</p> 
 
    <p>magnam doloribus quidem.</p> 
 
    <p>sequi iste itaque corporis ducimus,</p> 
 
    <p>vero commodi sed fugiat</p> 
 
    <p>qui a perferendis sint,</p> 
 
    <p>magnam doloribus quidem.</p> 
 
    <p>sequi iste itaque corporis ducimus,</p> 
 
    <p>vero commodi sed fugiat</p> 
 
    <p>qui a perferendis sint,</p> 
 
    <p>magnam doloribus quidem.</p> 
 
</div>

出典

2016-09-28 15:41:37

すべて、「親」の第一は、divのために定義されたクラスであるので、あなたは間違っている、DIVする下部マージンを適用しようとしています、この

ソリューションは、あなたがこれにコードを変更します

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <style> 
      .parent { 
       margin: 20px; 
       background: #555; 
       padding: 1px; 
      } 
      .parent p { 
       display: inline-block; 
       margin: 0; 
       margin-right: 5px; 
       padding: 0; 
       background: #CCC; 
      } 
      .parent p::first-line {   //Line modified by Dixit, added " p" 
       margin-bottom: 10px;/* not working */ 
      } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
     <p>Lorem ipsum dolor</p> 
     <p>sit amet,</p> 
     <p>consectetur adipisicing elit.</p> 
     <p>Tempora,</p> 
     <p>numquam, reiciendis.</p> 
     <p>Voluptatum molestias,</p> 
     <p>sequi iste itaque corporis ducimus,</p> 
     <p>vero commodi sed fugiat</p> 
     <p>qui a perferendis sint,</p> 
     <p>magnam doloribus quidem.</p> 

    </div> 
    </body> 
    </html>

しかし、それはを動作しませんあなたはすでに0にマージンを設定しているので、まだ、その理由は、.parent P {}ブロック内で、あなたはそれを達成することができる方法は、余白除去することであるさ：0; .parent p {}ブロックからの行は、次のコードになります。

.parent { 
 
    margin: 20px; 
 
    background: #555; 
 
    padding: 1px; 
 
} 
 
.parent p { 
 
    display: inline-block; 
 
    //Line removed by Dixit, Line : margin:0px; 
 
    margin-right: 5px; 
 
    padding: 0; 
 
    background: #CCC; 
 
} 
 
.parent p::first-line { 
 
    //Line modified by Dixit, added " p" 
 
    margin-bottom: 10px; 
 
    /* not working */ 
 
}

<div class="parent"> 
 
    <p>Lorem ipsum dolor</p> 
 
    <p>sit amet,</p> 
 
    <p>consectetur adipisicing elit.</p> 
 
    <p>Tempora,</p> 
 
    <p>numquam, reiciendis.</p> 
 
    <p>Voluptatum molestias,</p> 
 
    <p>sequi iste itaque corporis ducimus,</p> 
 
    <p>vero commodi sed fugiat</p> 
 
    <p>qui a perferendis sint,</p> 
 
    <p>magnam doloribus quidem.</p> 
 
</div>

出典

2016-09-28 15:12:51

親と最初と最後の子供の間に分離があってはいけないと私は念入りに言いました...私はすでにその方法に来ていました。 – Vandervals

あなたがPの最初と最後の要素のトップ位置を知るために与えられたスクリプトを追加することができ、そして最初の行のPsのための上マージンを削除することができ、および下部の余白を削除することができます最後の行のPsのために。

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $("p").each(function(index) 
     { 
      var offsetMin =$("p:first-child").offset().top; 
      var offsetMax =$("p:last-child").offset().top; 
      if($(this).offset().top==offsetMax) 
      {     
       $(this).css("margin-bottom","0px"); 
      } 
      else if($(this).offset().top==offsetMin) 
      { 
       $(this).css("margin-top","0px"); 
      }    
     }); 
    }); 
</script>

出典

2016-09-28 16:06:21

インラインブロック要素のリストを縦方向にマージンする方法はありますか？

答えて

関連する問題