2017-08-31 1 views
-2

J'ai un fichier index.html et un fichier de style. Voici à quoi ressemble cette section dans ma page Web.Comment éviter d'aligner du texte avec des sections de sélection précédentes dans html css?

Webpage

Remarquez comment quiz est en retrait. Cependant, j'ai utilisé le même style pour Quiz et Informations sur l'utilisateur. Dans mon fichier de style:

.header{ 
    margin-top: 2.5%; 
    margin-left: 2.5%; 
    color: #0381a5; 
    font-family: georgia; 
    font-size: 40px; 
    display: inline-block; 
    border-bottom: 3px solid #0381a5; 
    width: 95%; 
} 

.sub-header{ 
    margin-top: 2.5%; 
    margin-left: 5%; 
    color: #0381a5; 
    font-family: georgia; 
    font-size: 30px; 
    display: inline-block; 
    border-bottom: 3px solid #0381a5; 
    width: 92.5%; 
} 

Ce sont deux sous-en-têtes. Voici comment j'ai appelé le style index.html

<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="/style.css" type="text/css" charset="utf-8"> 
    <title>Cognition Study</title> 
</head> 

<form action="/cgi-bin/form.py"> 
    <div class="header"> 
    Cognition Study 
    </div> 
    <!--paragraph--> 
    <div class="sub-header"> 
    User Information 
    </div> 
    <!--dropdown menus--> 
    <div class="txt">Continue to the quiz section below.</div> 
    <br> 
    <div class="sub-header"> 
    Quiz 
    </div> 

Quelle est la cause « Quiz » à indenté, et comment puis-je faire aligné avec « Informations utilisateur »?

+0

Nous ne pouvons pas aider à base de captures d'écran de votre code, en particulier parce que le problème est pas dans le code que vous nous montrez. Veuillez créer un extrait ici avec tout le code HTML et CSS de la page. –

+0

Votre site Web est-il en ligne? Il est vraiment difficile de déboguer CSS sans pouvoir jouer avec un débogueur. Alternativement, vous pouvez poster un PLUNKER avec un code similaire et essayer de le recréer ici. –

+0

le code fourni ne reproduit pas le problème selon l'image dans la question ... – kukkuz

Répondre

0

J'ai utilisé votre code et je ne vois aucun problème. Peut-être le problème avec votre navigateur?

screenshot

.header{ 
 
    margin-top: 2.5%; 
 
    margin-left: 2.5%; 
 
    color: #0381a5; 
 
    font-family: georgia; 
 
    font-size: 40px; 
 
    display: inline-block; 
 
    border-bottom: 3px solid #0381a5; 
 
    width: 95%; 
 
} 
 

 
.sub-header{ 
 
    margin-top: 2.5%; 
 
    margin-left: 5%; 
 
    color: #0381a5; 
 
    font-family: georgia; 
 
    font-size: 30px; 
 
    display: inline-block; 
 
    border-bottom: 3px solid #0381a5; 
 
    width: 92.5%; 
 
}
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" href="/style.css" type="text/css" charset="utf-8"> 
 
    <title>Cognition Study</title> 
 
</head> 
 

 
<form action="/cgi-bin/form.py"> 
 
    <div class="header"> 
 
    Cognition Study 
 
    </div> 
 
    <!--paragraph--> 
 
    <div class="sub-header"> 
 
    User Information 
 
    </div> 
 
    <!--dropdown menus--> 
 
    <div class="txt">Continue to the quiz section below.</div> 
 
    <br> 
 
    <div class="sub-header"> 
 
    Quiz 
 
    </div>