Warum span kann nicht in der gleichen Zeile mit div angezeigt werden?

-2

* { 
 
    padding:0; 
 
    margin:0; 
 
}  
 

 
div.header{ 
 
    width:300px; 
 
    height:150px; 
 
    border:1px solid red; 
 
} 
 

 
div.header_inside{ 
 
    margin:0 auto; 
 
    width:150px; 
 
    height:100px; 
 
    border:1px solid red; 
 
}

<div class="header"> 
 
    <span>header</span> 
 
    <div class="header_inside">header_inside</div>    
 
</div>

Der Text header in der Spanne Label, es ist ein Inline-Element ist, warum kann es nicht in der gleichen Zeile angezeigt werden (oder sagt, auf gleiche Höhe) mit div header_inside?
Hinzufügen margin-top:-20px; in CSS von div.header_inside kann Text in span auf der gleichen Linie mit div header_inside angezeigt werden, ist es nicht mein Problem.

Quelle

2016-05-05 it_is_a_literature

Es gibt keine '' in Ihrem Code, oder ich nur Frage verstanden incorectly – AleshaOleg

@AleshaOleg ' header' ... –

@AleshaOleg - Es ist in Zeile 1 des HTML. – Quentin

Ein Div ist standardmäßig display: block, also erzeugt es eine Blockbox mit Zeilenumbrüchen davor und danach.

Wenn Sie es auf der gleichen Linie wie einige Inline-Inhalt wollen, dann müssen Sie es display: inline ändern, display: inline-block usw.

Quelle

2016-05-05 14:46:32 Quentin

A div ist ein Blockelement und müssen den ganzen Raum. Daher kann kein anderes Element neben einem Blockelement platziert werden. Sie müssen also die display der div zu inline oder inline-block ändern. Sie können den Code wie folgt ändern:

* { 
 
    padding:0; 
 
    margin:0; 
 
}  
 
div.header { 
 
    width:300px; 
 
    height:150px; 
 
    border:1px solid red; 
 
} 
 
div.header_inside{ 
 
    display:inline-block; 
 
    margin:0 auto; 
 
    width:150px; 
 
    height:100px; 
 
    border:1px solid red; 
 
}

<div class="header"> 
 
    <span>header</span> 
 
    <div class="header_inside">header_inside</div> 
 
</div>

Quelle

2016-05-05 14:47:02

Sie können die "inline-block" Eigenschaft verwenden, so noch ein Inline-Element, aber u kann

<!DOCTYPE html> 
 
<html> 
 
<style type="text/css"> 
 
*{ 
 
padding:0; 
 
margin:0; 
 
}  
 
div.header{ 
 
width:300px; 
 
height:150px; 
 
border:1px solid red; 
 
} 
 
div.header_inside{ 
 
margin:0 auto; 
 
width:150px; 
 
height:100px; 
 
border:1px solid red; 
 
display: inline-block; 
 
} 
 
</style> 
 
<body> 
 
    <div class="header"><span>header</span> 
 
     <div class="header_inside">header_inside    
 
     </div>    
 
    </div> 
 
</body> 
 
</html>

Breite und Höhe hinzufügen

Quelle

2016-05-05 14:47:22

Warum span kann nicht in der gleichen Zeile mit div angezeigt werden?

Antwort

Verwandte Themen