CSS Liste float

Question

links

nicht ausgerichtet sind, Dies ist mein Code:

HTML:

<li><div class="card"> 
     <img src="uploads/image/default_profile.jpg" width="195" height="260" /> 
     <p><strong>Dr./BGen. Antonio L. Tamayo</strong><br> 
<strong>AFP, FPCHA, Ph. D</strong></p> 
     <p>Chairman of the Board and CEO<br> 
Founder, University of Perpetual Help System DALTA</p> 
    </div></li> 

    <li><div class="card"> 
     <img src="uploads/image/default_profile.jpg" width="195" height="260" /> 
     <p><strong>Daisy M. Tamayo</strong><br><strong>RN, MAN, Ph. D</strong></p> 
     <p>Vice Chairman and Treasurer<br> 
Co-Founder, University of Perpetual Help System DALTA</p> 
    </div></li> 

</ul> 

CSS:

ul.card-wrap 
padding: 0 

li 
    font-size: 16px 
    display: inline-block 

.card 
    width: 195px 

aber wenn ich Schwimmer setzen: links auf meine CSS dies passierte:

es ausgerichtet ist, aber es wurde aus dem Behälter

ul.card-wrap 
padding: 0 

li 
    float: left 
    font-size: 16px 
    display: inline-block 

.card 
    width: 195px 

, wie ich dieses Problem beheben?

Answer 1

müssen Sie clearfix mit Schwimmern auch float: left auf dem .card-wrap

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

lesen Sie clearfix

Wenn Sie die Möglichkeit haben, immer Flexbox

Answer 2

hinzufügen verwenden

li { 
    vertical-align: top; 
} 

(und kein Gleitkomma)

In Ihrem CSS sind li s als Inline-Blöcke definiert, die standardmäßig vertikal an ihrer Basislinie ausgerichtet sind. Diese Regel richtet sie an ihrer Spitze aus.