Meldum Meldum - 1 year ago 54
CSS Question

safari: flexbox and extra margin

how can I remove this margin for safari?



ul {
columns: 320px;
list-style: none;
margin: 0;
padding: 0;
}

li {
border: 2px solid black;
border-radius: 5px;
padding: 40px 30px 50px 30px;
position: relative;
text-align: left;
width: 320px;
margin-bottom: 20px;
margin-right: 20px;
break-inside: avoid;
column-gap: 0;
&:nth-child(3n) {
margin-right: 0;
}
}


demo: https://jsbin.com/wocaxopofa/1/edit?html,css,output

Answer Source

Add display: inline-block to li

.wrap {
  width: 1200px;
}

ul {
  columns: 320px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 2px solid black;
  border-radius: 5px;
  padding: 40px 30px 50px 30px;
  position: relative;
  text-align: left;
  width: 320px;
  margin-bottom: 20px;
  margin-right: 20px;
  break-inside: avoid;
  column-gap: 0;
  display: inline-block;
}
li:nth-child(3n) {
  margin-right: 0;
}
<div class="wrap">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam reiciendis eum sit illum ut fuga enim sapiente maiores nobis ratione!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod alias omnis nostrum iste facilis nobis blanditiis numquam hic inventore laboriosam atque quis consequuntur soluta, molestias odit error praesentium ab! Praesentium consequuntur deserunt possimus perspiciatis dolor fugit laboriosam, rem ut provident voluptatum voluptas veritatis dolorem! Eos neque odit ad libero deleniti.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nemo.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum officiis libero praesentium quis! Qui nemo similique dolorem at obcaecati pariatur odio possimus minus. Quisquam delectus ex nisi est accusamus, ullam ducimus quod quidem veritatis cupiditate molestias aut maxime, dicta vel.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, quas!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque deleniti eius eligendi reprehenderit accusamus quos? Tempore provident modi aut impedit, aperiam quisquam iste doloremque voluptatum fuga sint eos aliquam.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aspernatur itaque quo libero provident id hic nesciunt, officiis nemo, sapiente.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores, aliquam ex adipisci amet numquam dolorum dicta soluta excepturi reprehenderit vitae aspernatur labore commodi animi quaerat sed at, eveniet magni!</li>
  </ul>
</div>

https://jsbin.com/wuworukexu/edit?html,css,output

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download