2017-02-20 58 views
0

我想用flex-wrap屬性來調整上multiliges內容。Flexbox的使用情況,以調整在多線內容塊與柔性包裝

我的問題是,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). &amp;lt;hal-01253144&amp;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. &amp;lt;10.1016/j.geomphys.2016.11.012&amp;gt;. &amp;lt;hal-01308770v3&amp;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. &amp;lt;hal-01401473&amp;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. &amp;lt;10.1007/JHEP01(2017)078&amp;gt;. &amp;lt;in2p3-01372979&amp;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. &amp;lt;hal-01435264&amp;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); 
} 

http://codepen.io/matoeil/pen/bgPMjZ

+1

移動'顯示:彎曲;柔性包裝:包裝;''到集團-FancyDisplay' – LGSon

+0

但隨後的柔性基礎不迴應 – Matoeil

+0

發佈的答案,因爲有2件更多的事情被改變 – LGSon

回答

2

display: flex應適用於一個要顯示爲柔性物品的元素的父,所以移動display: flex; flex-wrap: wrap;bloc-FancyDisplay

和Flex項屬性應該適用於直接的孩子,所以移動flex-basis: calc(33% - 20px);ul.hal-pub-list-type-2(注意我改成33%)

Updated codepen

+0

它是如此簡單:) – Matoeil

+1

@Matoeil謝謝...它總是當人們知道答案:) – LGSon