CSS Inline Block Leerraum

Question

mir verschiedene Trie tun things aber kann nicht scheinen, von dem weißen Raum hier zwischen zwei Inline-Blöcken zu befreien, so ist list nicht neben inline-block-div:

.parent { 
 
    border: 10px solid red; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    border: 5px solid blue; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>

Answer 1

Ich empfehle, Flex zu verwenden. Flex ist sehr nützlich um sich zu entwickeln.

.parent { 
 
    border: 10px solid red; 
 
    display: flex; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>

Answer 2

Sie können die Eltern ein Flexbox es

.parent { 
 
    border: 10px solid red; 
 
    display: flex; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 
</div>

Answer 3

fixiert zu haben, machen den Raum von HTML tatsächlich kommt. Standardmäßig wird Speicherplatz zu Inline-Block Elementen hinzugefügt. Ich hoffe, du wusstest, dass du den Weltraum bekämpfen musst. Und ein anderes Problem in Ihrem CSS Sie haben vergessen, Box-Sizing hinzuzufügen: border-box Eigentum.

Ohne diese Eigenschaft Breite berechnet wird als

Breite folgt: 75% + border-Links-Breite + border-rechts-Breite. Ihre Breite ist also 75% + 10px. Ihre Breite wird mehr hinzugefügt, wenn eine Polsterung erwähnt wird. Versuchen Sie stattdessen diesen Code

div{ 
 
    box-sizing:border-box; 
 
} 
 
.parent { 
 
    border: 10px solid red; 
 
    width:100% 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
    margin-left:-4px; 
 
    border:5px solid blue 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>