Comment faire de deux différentes tailles de police s'asseoir sur une ligne en utilisant Unsemantic

Im nouveau à la fois frontal-dev et unsemantic.
Im essayant d'obtenir deux différentes tailles de police pour s'asseoir sur la même ligne. Mais les méthodes classiques ne semblent pas fonctionner. J'ai essayé vertical-align: "le fond", mais qui n'a pas le couper.
C'est à quoi il ressemble actuellement
Je suis désolé, je ne pourrais pas utiliser jsfiddle pour vous montrer, à l'aide de unsemantics signifie qu'il n'a pas d'afficher correctement

 10 <body class="grid-container">
 11 <header>
 12
 13   <div class ="grid-100 align-center">
 14   <div class="grid-30">
 15     <div id="name"><a href="http//nadiavu.com">Nadia</a></div> 
 16   </div>
 17   <div class="grid-30">
 18     <div id="about"><a href="about">About</a></div>
 19   </div>
 20   <div class="grid-20 suffix-20">
 21    <div id="contactpage"><a href="contacpage">Contact</a></div>
 22 </div>
 23 </div>

Et c'est le CSS

 27 #name{
 28      color: #A0909D;
 29      font-size: 2.2em ;
 30      font-family: Palatino;
 31      float: right;
 32  }
 33
 56 #about{
 57     font-family: Palatino;
 58     font-size: 1.2em;
 59     float: right;
 60
 61
 62 }
 63
 64 #contactpage{
 65       font-family: Palatino;
 66       font-size: 1.2em;
 67       float: right;
 68
 69  }

OriginalL'auteur nadia | 2014-02-22

  1. 1

    vertical-align n'est pas créé pour cela.
    Utiliser à la place de la la hauteur de la ligne propriété:

    <!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 16px;}
p {float: left; margin: 5px; }
p.big {font-size: 200%; line-height:35%;}
</style>
</head>

<body>
<p>
This
</p>

<p class="big">
This
</p>

<p>
This
</p>

</body>
</html>

    OriginalL'auteur Anarcociclista

  2. 2

    Vous pouvez simplement laisser le texte à se comporter comme normal styles en ligne comme, Démo.

    Voici le css:

    .big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

    Le problème est causé par flottante.

    Ou vous pouvez faire quelque chose comme cela,

    css: 

    .parent {
    vertical-align: bottom;
}

.parent span {
    display: inline-block;
    width: 200px;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

    Enfin, un violon: Démo

    OU!! Vous pouvez aller sur cette option,

    css:

    .parent {
    display: table;
    vertical-align: bottom;
    width: 100%;
}

.parent span {
    display: table-cell;
    width: 33%;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

    Encore un autre violon, Démo

    Je vous remercie pour cela. Malheureusement, l'ajout de toutes les largeurs manuellement ne fonctionne pas si bien avec le système de grille. Mais je vous remercie pour votre temps. J'ai décidé de faire la hauteur de la ligne pour obtenir d'eux, assis sur la même ligne.:)

    OriginalL'auteur Josh Powell

  3. 0
    <P style="color: white;font-size: 2.2em" class="w3-center"><span style="font-
size: 1.2em">Nadia</span>About<span style="font-size: 1.2em">Contact</span>
</P>

    c'est comment vous pouvez obtenir les différentes tailles de texte sur la même ligne

    OriginalL'auteur sase mohan