wenn ich Grenze habe, die Problem in der Überschrift hat?

Wenn ich Grenze im Boden geben werde seine nach oben und Header, wie wir in der Code rosa Linie Grenze steigen möchte ich, dasswenn ich Grenze habe, die Problem in der Überschrift hat?

unter dem vollständigen Namen sehen können, geht nach unten

i die Referenz dieser Seite bin mit und so dass es durch meine eigene https://codepen.io/techie4good/pen/RGNBPQ?q=resume&limit=techie4good

body { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 1.1em; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
} 
 

 
.main { 
 
    color: #4EC5C1; 
 
} 
 

 
#name { 
 
    float: left; 
 
} 
 

 
#contact { 
 
    float: right; 
 
    list-style-type: none; 
 
} 
 

 
#workExperiance { 
 
    float: left; 
 
} 
 

 
header { 
 
    border-bottom: solid 2px pink; 
 
    margin: 70px; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Full Name Resume</title> 
 
    <meta charset=utf-8> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <section> 
 
     <h1 id="name"><span class="main">full </span> Name</h1> 
 
    </section> 
 
    <section> 
 
     <ul id="contact"> 
 
     <li><span class="main">Cell:</span> +1-000000000</li> 
 
     <li><span class="main">Email: </span> [email protected]</li> 
 
     <li><span class="main">Location:</span> NY,USA.</li> 
 
     </ul> 
 
    </section> 
 
    </header> 
 
    <section id="workExperiance">Work Experience</section> 
 
</body> 
 

 
</html>

Quelle

2017-12-20 Rishit Shah

hinzufügen float: left;width: 100%; zu .header Klasse

body { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 1.1em; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
} 
 

 
.main { 
 
    color: #4EC5C1; 
 
} 
 

 
#name { 
 
    float: left; 
 
} 
 

 
#contact { 
 
    float: right; 
 
    list-style-type: none; 
 
} 
 

 
#workExperiance { 
 
    float: left; 
 
} 
 

 
header { 
 
    border-bottom: solid 2px pink; 
 
    margin: 70px; 
 
    float: left; 
 
    width: 100%; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Full Name Resume</title> 
 
    <meta charset=utf-8> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <section> 
 
     <h1 id="name"><span class="main">full </span> Name</h1> 
 
    </section> 
 
    <section> 
 
     <ul id="contact"> 
 
     <li><span class="main">Cell:</span> +1-000000000</li> 
 
     <li><span class="main">Email: </span> [email protected]</li> 
 
     <li><span class="main">Location:</span> NY,USA.</li> 
 
     </ul> 
 
    </section> 
 
    </header> 
 
    <section id="workExperiance">Work Experience</section> 
 
</body> 
 

 
</html>

Quelle

2017-12-21 17:30:17

diese Linie von CSS Code hinzufügen:

header:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

body { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 1.1em; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
} 
 

 
.main { 
 
    color: #4EC5C1; 
 
} 
 

 
#name { 
 
    float: left; 
 
} 
 

 
#contact { 
 
    float: right; 
 
    list-style-type: none; 
 
} 
 

 
#workExperiance { 
 
    float: left; 
 
} 
 

 
header { 
 
    border-bottom: solid 2px pink; 
 
    margin: 70px; 
 
} 
 

 
header:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Full Name Resume</title> 
 
    <meta charset=utf-8> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <section> 
 
     <h1 id="name"><span class="main">full </span> Name</h1> 
 
    </section> 
 
    <section> 
 
     <ul id="contact"> 
 
     <li><span class="main">Cell:</span> +1-000000000</li> 
 
     <li><span class="main">Email: </span> [email protected]</li> 
 
     <li><span class="main">Location:</span> NY,USA.</li> 
 
     </ul> 
 
    </section> 
 
    </header> 
 
    <section id="workExperiance">Work Experience</section> 
 
</body> 
 

 
</html>

Quelle

2017-12-20 07:29:39 Hanif

Keine Notwendigkeit 'space' zwischen doppelten Anführungszeichen hinzuzufügen. Es funktioniert ohne das. – Pedram

Offenbar dass float: left war der Täter ... es wurde entfernt und es funktioniert ...

body { 
 
     font-family: Arial, sans-serif; 
 
     font-size: 1.1em; 
 
     width: 75%; 
 
     margin: 0 auto; 
 
    } 
 
    .main{color: #4EC5C1;} 
 
    #contact{float:right;list-style-type:none;} 
 
    #workExperiance{float:left;} 
 
    header{border-bottom:solid 2px pink; margin: 70px;}

<html lang="en"> 
 
    
 
    <head> 
 
     <title>Full Name Resume</title> 
 
     <meta charset=utf-8> 
 
    </head> 
 
    
 
    <body> 
 
     <header> 
 
     <section> 
 
      <h1><span class="main">full </span> Name</h1> 
 
     </section> 
 
     <section> 
 
      <ul id="contact"> 
 
      <li><span class="main">Cell:</span> +1-000000000</li> 
 
      <li><span class="main">Email: </span> [email protected]</li> 
 
      <li><span class="main">Location:</span> NY,USA.</li> 
 
      </ul> 
 
     </section> 
 
     </header> 
 
     <section id="workExperiance">Work Experience</section> 
 
    </body> 
 
    
 
    </html>

Quelle

2017-12-20 07:34:51

Was bedeutet das, warum es passiert, Sir Sie haben das aktuelle Problem gelöst, aber was war der Grund für ein solches Problem können Sie wenig Details geben, so dass jemand diese Frage haben kann sie diese Antwort verweisen. Was mache ich falsch und was getan werden sollte und durch Hinzufügen Ihres Elements, was passiert können –

Basierend auf w3schools, "Elemente nach einem schwebenden Element wird es fließen." Wenn Sie also float verwenden: links oder rechts, versuchen die anderen Elemente um sie herum zu floaten (dh) Jedes andere Element beginnt rechts oder links vom "float" -Element ... In diesem Beispiel schwebt also der von Ihnen erstellte Rahmen " um "(dh) über dem Tag ... Also entweder float: none oder float: erben oder gar float: initial hilft dabei, die anderen umherschwimmenden Elemente" zu unterdrücken "... –

wenn ich Grenze habe, die Problem in der Überschrift hat?

Antwort

Verwandte Themen