我想使用 flex-wrap
属性来调整 multiliges 上的内容。
我的问题是 li
没有挨在一起
我的容器有什么遗漏吗?
<div class="bloc-FancyDisplay">
<ul class="hal-pub-list-type-2">
<li class="row hal-pub" style="padding-bottom: 20">
<a href="/publication/hal-01253144">Jean-Marie Barbaroux, Dirk Hundertmark, Tobias Ried, Semjon Vugalter. STRONG SMOOTHING FOR THE NON-CUTOFF HOMOGENEOUS BOLTZMANN EQUATION FOR MAXWELLIAN MOLECULES WITH DEBYE-YUKAWA TYPE INTERACTION. Kinetic and Related Models , AIMS, 2017, 10 (4). &lt;hal-01253144&gt;</a>
</li>
</ul>
<ul class="hal-pub-list-type-2">
<li class="row hal-pub" style="padding-bottom: 20">
<a href="/publication/hal-01308770">C. Duval, G.W. Gibbons, P.A. Horváthy. Conformal and projective symmetries in Newtonian cosmology. Journal of Geometry and Physics, Elsevier, 2017, 112, pp.197--209. &lt;10.1016/j.geomphys.2016.11.012&gt;. &lt;hal-01308770v3&gt;</a>
</li>
</ul>
<ul class="hal-pub-list-type-2">
<li class="row hal-pub" style="padding-bottom: 20">
<a href="/publication/hal-01401473">Aoife Bharucha, M. Beneke, P. Ruiz Femenia, Andrzej Hryczuk, S. Recksiegel. The last refuge of mixed wino-Higgsino dark matter. Journal of High Energy Physics, Springer Verlag (Germany), 2017. &lt;hal-01401473&gt;</a>
</li>
</ul>
<ul class="hal-pub-list-type-2">
<li class="row hal-pub" style="padding-bottom: 20">
<a href="/publication/in2p3-01372979">D. Barducci, A. Bharucha, N. Desai, M. Frigerio, B. Fuks, et al.. Monojet searches for momentum-dependent dark matter interactions. Journal of High Energy Physics, Springer, 2017, 01, pp.078. &lt;10.1007/JHEP01(2017)078&gt;. &lt;in2p3-01372979&gt;</a>
</li>
</ul>
<ul class="hal-pub-list-type-2">
<li class="row hal-pub" style="padding-bottom: 20">
<a href="/publication/hal-01435264">B Herlemont, O Ogievetsky. Rings of h-deformed differential operators. Theoretical and Mathematical Physics, 2017. &lt;hal-01435264&gt;</a>
</li>
</ul>
.bloc-FancyDisplay{
background: rgb(233,233,233);
;
}
ul.hal-pub-list-type-2 {
display: flex;
flex-wrap: wrap;
list-style: outside none none;
margin-left: -20px;
}
ul.hal-pub-list-type-2 li {
flex-basis: calc(35% - 20px);
background:white;
}
ul.hal-pub-list-type-2 li.hal-pub > a {
border-bottom: medium none;
color: inherit;
display: inline-block;
margin: 10px;
padding: 10px;
word-break: normal;
}
ul.hal-pub-list-type-2 li.hal-pub a:hover {
background-color: rgb(150, 60, 245);
color: rgb(255, 255, 255);
}
最佳答案
display: flex
应该应用于要显示为 flex 元素的元素的父级,因此移动 display: flex; flex-wrap: wrap;
到 bloc-FancyDisplay
并且 flex 元素属性应该应用于直接子项,因此将 flex-basis: calc(33% - 20px);
移动到 ul.hal-pub-list-type- 2
(注意我把它改成了 33%)
关于css - flexbox 使用 flex wrap 调整多行内容 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42342429/