如何垂直空間（margin-likely）內嵌塊元素的列表？

我不知道這是不可能修改HTML，但是，假設你有一個動態添加的可變寬度的內聯塊元素列表。您不希望元素和父元素之間有任何邊距，但是如果它們開始形成兩條線，則您希望它們之間有一定的空間。我試過::first-line但它不適用於利潤率。那麼有誰知道如何做到這一點？如何垂直空間（margin-likely）內嵌塊元素的列表？

拿這個例子：

.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爲此 –

這可以通過設置margin-top給孩子和negative margin父來實現。這樣，它會把孩子們拉到頂部去除他們之間的空間。

Bootstrap's 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>

但是它仍然不起作用，原因是因爲您已經將margin設置爲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。

<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

如何垂直空間（margin-likely）內嵌塊元素的列表？

回答

相關問題